解决ajax跨域问题

最近在做项目是需要访问另一个平台获取数据，ajax为了安全默认是不支持跨域访问的，所以使用ajax直接访问的时候出现问题，由于之前也没做过这样的需求，当时不知道就查了资料，然后自己做了实验，这里主要记录一下。

测试环境struts2

1.后台不使用json(自己拼json)

public String jsonData(){
try {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
String callback = request.getParameter("callback");
String returnResult = "";
String str = "{"name":"zhangsan"}";
if(callback != null && !"".equals(callback)){
returnResult = callback + "(" + str + ")";
}
response.setCharacterEncoding("utf-8");
response.setContentType("text/javascript");
PrintWriter writer = response.getWriter();
writer.println(returnResult);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

struts配置

<package name="user" extends="struts-default">
<action name="jsonp" class="studentAction" method="jsonData"> </action>
</package>

ajax请求

$(function(){
var url = "http://localhost:8081/mybatis/jsonp?callback=?";//访问时callback会自己接有随机字符串往后台发送

//后台通过String callback = request.getParameter("callback");的到callback的值然后将这个值作为jsonp数据的头部拼接成jsonp数据返回
$.ajax({
url: url,
dataType: 'jsonp',
type: 'post',
success: function(data) {
console.log(data.name);
},
error:function(){
console.log("请求失败");
}
});
});

例如用浏览器输入http://localhost:8081/mybatis/jsonp?callback=lisi

在浏览器看到的数据是

lisi({

"name":"zhangsan"

js控制台直接打印zhangsan

2.后台使用json(使用struts json plugin)

private Student entity;//生成get set

public String jsonpTest(){
Student stu = new Student();
stu.setName("zhangsan");
this.setEntity(stu);
return SUCCESS;
}

struts的配置文件

<package name="user" extends="json-default">
<action name="jsonp" class="studentAction" method="jsonpTest">
<result name="success" type="json">
<param name="root">entity</param>
<param name="callbackParameter">jsoncallback</param>
</result>
</action>
</package>

主要是加上<param name="callbackParameter">jsoncallback</param>

此时的ajax请求

$(function(){ var url = "http://localhost:8081/mybatis/jsonp"; $.ajax({ url: url,dataType: 'jsonp',jsonp: 'jsoncallback',//和struts中配置的callbackParameter参数名要一致 type: 'post',success: function(data) { console.log(data.name); },error:function(){ console.log("请求失败"); } }); });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!