AJAX 实现跨域请求

最新推荐文章于 2022-07-05 08:58:56 发布

灬奔跑的蜗牛灬

最新推荐文章于 2022-07-05 08:58:56 发布

阅读量199

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/qq_16183731/article/details/88269711

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用AJAX技术实现跨域请求，详细阐述了在HTML页面和后台逻辑中设置的具体步骤，帮助开发者解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax 跨域请求实现：
html 页面实现：

//jsonp ajax 请求
function send(){
	//obj.toJSONString(); 对象转json串
	$.ajax({
		type:"post",
		url:"http://127.0.0.1:8888/message/gee",
		async:true,
		data:{
			name:"wangming",
			age:"18"
		},
		dataType:"jsonp",
		jsonp:"callback",
		success:function(data){
			console.log(data.id)
			console.log(data)						
		},
		error:function(data){
			console.log("<<<<<fail")
		}
	});
}

后台逻辑的实现

//方式1 实现跨域
@RequestMapping("message/ge")
    public String messageGe( HttpServletResponse response , HttpServletRequest request ) throws Exception
    {
        //允许跨域请求， response.setHeader("Access-Control-Allow-Origin", "http://www.client.com")
        //允许http://www.client.com 的跨域请求

        response.setHeader("Access-Control-Allow-Origin", "*");
        String callback = request.getParameter("callback");
        if(StringHelper.isNullOrEmptyString(callback))
        {
            return "redirect:/index";
        }

        User user = new User();
        user.setAge( Integer.valueOf( request.getParameter("age") ));
        user.setBrithday(new Date());
        user.setGender("man");
        user.setName(UUID.randomUUID().toString() + request.getRemoteAddr() + request.getRemotePort());
        user.setId(request.getParameter("name"));

        String userJSON = objectMapper.writeValueAsString(user);
        //回调Js方法
        String call = callback +"("+userJSON+")";
        responseOut("utf-8",call,response);
        return null;
    }

    private void responseOut(String charSet,String returnString,HttpServletResponse response)
    {
        response.setContentType("text/html;charset="+charSet);
        PrintWriter pw = null;

        try {
            pw = response.getWriter();
            pw.write(returnString);
            pw.close();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
--------------------------------------------------------------------------
	方式2：跨域数据处理
    @RequestMapping(value = "message/gee",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String messageGee( HttpServletResponse response , HttpServletRequest request ) throws Exception
    {
        //允许跨域请求， response.setHeader("Access-Control-Allow-Origin", "http://www.client.com")
        //允许http://www.client.com 的跨域请求

        String callback = request.getParameter("callback");
        if(StringHelper.isNullOrEmptyString(callback))
        {
            return "redirect:/index";
        }

        User user = new User();
        user.setAge( Integer.valueOf( request.getParameter("age") ));
        user.setBrithday(new Date());
        user.setGender("man");
        user.setName(UUID.randomUUID().toString() + request.getRemoteAddr() + request.getRemotePort());
        user.setId(request.getParameter("name"));

        String userJSON = objectMapper.writeValueAsString(user);
        //回调Js方法
        String call = callback +"("+userJSON+")";
        return call;
    }