ajax jsonp跨域乱码解决方案

在前端页面对要在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.
 */
@Controller
public 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,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,sans-serif;font-size: 30px;">
    预约</button>
</div>
</body>

</html>

ajax jsonp跨域乱码解决方案

相关文章