ajax jsonp跨域乱码解决方案

来源：互联网发布：六轴机械手臂算法编辑：程序博客网时间：2024/06/01 07:46

在前端页面对要在url中传递的参数进行urlencoder(),是两次编码！！！

在controller中对接收的参数进行解码，一次解码！！！

在controller的@requestmapping()注解中添加属性product:

@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")

具体代码如下：

主页（服务端页面vm）:

<html><head>    <meta http-equiv="content-type" content="text/html; charset=utf-8">    <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $("#button").click(function(){                var name =encodeURI($("#name").val());                var tel =$("#tel").val();                var url ="/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?";                $.getJSON(url,                        function(data,status){                            $("#spanArea").html(data.userName+"\n "+data.id);                        });            });        });    </script></head><body><div style="position: absolute;left: 504px;height: 522px;" align="center">    <span style="font-size: 43px;font-family: fantasy;color: darkorange;" id="spanArea">预约页面</span><p><span style="font-size: 33px;font-family: fantasy;color: gray;">    姓名：</span><input type="text" id="name" style="width: 400px;height: 38px;font-size: 33px;"></p><p><span style="font-size: 33px;font-family: fantasy;color: gray;">    电话：</span><input type="text" id="tel" style="width: 400px;height: 38px;font-size: 33px;"></p><button id="button" style="width: 300px;height: 41px;background-color: darkorange;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 30px;">    预   约</button></div></body></html>

controller代码：

package com.jd.jr.controller;import com.alibaba.fastjson.JSON;import com.jd.jr.po.UserPo;import org.apache.log4j.Logger;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.io.UnsupportedEncodingException;import java.net.URLDecoder;/** * Created by guojiangjiang on 2015/8/7. */@Controllerpublic class Appointment {    private static Logger logger = Logger.getLogger(Appointment.class);    //@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")    @RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")    @ResponseBody    public String getAppointment(String name,String tel,String callback) throws UnsupportedEncodingException {    //  logger.info("name is: " + URLDecoder.decode(name,"UTF-8") + "tel is : " + URLDecoder.decode(tel,"utf-8"));        //String names =new String(name.getBytes("iso-8859-1"),"utf-8");        String names = URLDecoder.decode(name, "utf-8");        int telep = Integer.parseInt(tel);        UserPo user = new UserPo();        user.setId(telep);        user.setUserName(names);        String json = JSON.toJSONString(user);        String result = callback+"("+json+")";        System.out.println(result);        return result;    }}

跨域页面：

<html><head>    <meta http-equiv="content-type" content="text/html; charset=gbk">    <script type="text/javascript" src="jquery-1.8.3.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $("#button").click(function(){                var name =encodeURI($("#name").val());                var tel =$("#tel").val();                var url ="http://localhost:8080/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?";                $.getJSON(url,                        function(data,status){                            $("#spanArea").html(data.userName+"\n "+data.id);                        });            });        });    </script></head><body><div style="position: absolute;left: 504px;height: 522px;" align="center">    <span style="font-size: 43px;font-family: fantasy;color: darkorange;" id="spanArea">预约页面</span><p><span style="font-size: 33px;font-family: fantasy;color: gray;">    姓名：</span><input type="text" id="name" style="width: 400px;height: 38px;font-size: 33px;"></p><p><span style="font-size: 33px;font-family: fantasy;color: gray;">    电话：</span><input type="text" id="tel" style="width: 400px;height: 38px;font-size: 33px;"></p><button id="button" style="width: 300px;height: 41px;background-color: darkorange;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 30px;">    预   约</button></div></body></html>

0 0