基礎筆記(前端)

用於記錄自己平時前端中遇到的一些常見問題,防止習慣性的遺忘處理過程。

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()+")";
	}






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章