前端之家收集整理的这篇文章主要介绍了
ajax jsonp跨域乱码解决方案，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
404_0@在前端
页面对要在url中传递的参数进行urlencoder(),
是两次编码！！！
@H_
404_0@在controller中对接收的参数进行解码，
一次解码！！！
@H_
404_0@在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>
