用于记录自己平时前端中遇到的一些常见问题,防止习惯性的遗忘处理过程。
1、ajax跨域处理
无意中写了个ajax调用项目里面的一个controller,但是ajax和controller并不在同一个项目里(ajax直接写在一个html的静态文件里面),结果就发现controller能正常处理和返回,页面调试发现也收到了数据,但是ajax就是直接跳到error部分。始终不进success。最后去找原因,发现是跨域了。最后是利用jsonp处理的。jsonp是json的一种使用模式,常用于解决跨域问题。直接上代码。
页面部分:
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
function ajax(){
alert("测试");
$.ajax({
type: 'GET',
timeout: 5000,
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:"successCallback",
url: "http://localhost:8088/SSMDemo/user/getUser2",
data: {
id:1,
},
success: function(data) {
alert(data.userName);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
});
}
</script>
</head>
<body>
<input type="button" value="test" onclick="ajax()">
</body>
</html>
controller部分。
@RequestMapping(value="/getUser2",produces = "text/html;charset=UTF-8")
@ResponseBody
public String demo(int id,HttpServletResponse response){
User user=userService.getUser(id);
System.out.println(id);
System.out.println(user.getUserName());
JSONObject j=new JSONObject();
j.put("userName", user.getUserName());
return "successCallback("+j.toJSONString()+")";
}