基础笔记(前端)

用于记录自己平时前端中遇到的一些常见问题,防止习惯性的遗忘处理过程。

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






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