用於記錄自己平時前端中遇到的一些常見問題,防止習慣性的遺忘處理過程。
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()+")";
}