跨域前后端代码

最新推荐文章于 2024-05-23 21:11:54 发布

weixin_30539625

最新推荐文章于 2024-05-23 21:11:54 发布

阅读量122

点赞数

文章标签： json java 后端

原文链接：https://juejin.im/post/5cb48e47f265da034d2a08de

版权

后端代码

package com.sptiomap.llepds.workflow.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

public class HanCoRs implements HandlerInterceptor{

	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		 response.setHeader("Access-Control-Allow-Origin", "*");
	        response.setHeader("Access-Control-Allow-Methods", "*");
	        response.setHeader("Access-Control-Max-Age", "3600");
	        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
	        response.setHeader("Access-Control-Allow-Credentials","true"); //是否允许浏览器携带用户身份信息（cookie）
	        return true;
	}

	@Override
	public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
			ModelAndView modelAndView) throws Exception {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
			throws Exception {
		// TODO Auto-generated method stub
		
	}
复制代码

后端代码return "message("+json+")";

前端代码

方法一

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>test</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){ 
         
        $.ajax({
             type: "get",
             async: false,
             url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('你的名字：' + json.name + '  年龄： ' + json.age);
                 
             },
             error: function(){
                 alert('fail');
             }
         });
   
     });
     </script>
</head>
<body>

</body>
</html>复制代码

type：请求类型，GET 或 POST,默认为 GET；
async:true（异步）或 false（同步）,默认情况下为true,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
dataType:指定服务器返回的数据类型;
jsonpCallback:自定义JSONP回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法。

服务器返回的数据类型：

返回一个指定函数名为message的回调函数，函数里面包裹的数据为JSON格式。

方法二

$.ajax({        url: 'http://localhost:8080/llepds//llepdsWorkFlow/getCurrentWorkList.do?userName=dfs1',        type: 'GET',        dataType: 'jsonp',  // 请求方式为jsonp        jsonpCallback: "message",    // 自定义回调函数名        data: {},        success: function(result){          console.log(result)        },        error:function(err){           console.log(err);        }      });      function message(res) {        console.log(JSON.stringify(res));      }复制代码

方法三

var script = document.createElement('script');

script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack

script.src = 'http://localhost:8080/llepds//llepdsWorkFlow/getCurrentWorkList.do?userName=dfs1&callback=message';

document.head.appendChild(script);

// 回调执行函数

function message(res) {

console.log(JSON.stringify(res));

}

jsonp缺点：只能实现get一种请求。

转载于:https://juejin.im/post/5cb48e47f265da034d2a08de

weixin_30539625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域前后端代码

后端代码package com.sptiomap.llepds.workflow.controller;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.web.servlet.HandlerInterc...
复制链接

扫一扫