ajax 跨域请求

ajax 跨域请求

这一个是前端跨域请求的大概样式，其中type可以是post也可以是get，异步还是同步也可以。dataType就需要jsonp，否侧跨不了域。
$.ajax({
url:serviceUrl+"/testJsp/qq",
type:“get”,
async: false,
dataType:“jsonp”, //数据格式设置为jsonp
jsonp:“callback”, //Jquery生成验证参数的名称
jsonpCallback:“successCallback”,
success:function(data){ //成功的回调函数
alert(2)
alert(data.seat);
console.log(data);
},
complete: function() {
//请求完成的处理
alert(3)
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest)
alert(XMLHttpRequest.status);//200
alert(XMLHttpRequest.readyState);//4
alert(textStatus);//parseerror
alert(XMLHttpRequest.responseText);
console.log(errorThrown)
}
})

后端代码才是坑爹啊~~

以下是正确的后端代码，若后端直接用@responseBody返回会报错

@RequestMapping("/qq")
public void qq(HttpServletRequest req,HttpServletResponse resp,String callback){
Gson gson=new Gson(); //google的一个json工具库
Map<String,String> map=new HashMap<>();
map.put(“seat”,“12”);
System.out.println(callback+"("+gson.toJson(map)+");");
System.out.println(callback+"("+gson.toJson(map)+")");
//return callback+"("+gson.toJson(map)+");"; //构造返回值
//return callback+"("+gson.toJson(map)+");";
try {
resp.getWriter().write(callback+"("+gson.toJson(map)+");");;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

不管你用不用注解，你后端返回的数据格式不是json格式来的，是text/html格式。因为你输出的是
successCallback({“seat”:“12”});
这整行，看起来是json么？不是，若返回的时候reponse响应头中 Content-Type是 application/json;charset=UTF-8
那么ajax会报错进入到error，并报告解析错误。因为返回的数据是回调函数名加（），括号里面的才是json数据，外面一整个都是text数据所以在后端返回相应头时必须是text/html

。用了一个下午才知道这么个错误，看网上的资料都没说这个。。。。所以我特写一篇，来告诉大家如何正确返回