解决JS跨域与AJAX parsererror:Struts2 + Spring 实战
"解决js跨域问题以及ajax报parsererror,主要涉及struts2+Spring框架下的JSONP处理。" 在Web开发中,由于浏览器的安全策略,不同源的JavaScript代码之间不能进行通信,这就是著名的同源策略。然而,为了实现某些功能,如前端向后端API请求数据,我们需要克服这一限制,这催生了跨域解决方案。这里,我们关注的是使用JSONP(JSON with Padding)来解决跨域问题,同时处理jQuery AJAX请求中可能出现的"parsererror"。 JSONP是一种绕过同源策略的方法,通过动态创建`<script>`标签并将其`src`属性设置为服务端的URL,由于`<script>`标签不受同源策略限制,可以加载任何源的脚本。服务端返回的不是JSON格式的数据,而是包裹在函数调用中的JSON数据,如`myCallback({key: 'value'})`。前端通过预先定义这个`myCallback`函数来接收和解析返回的数据。 在Struts2+Spring的环境中,我们可以这样处理JSONP请求: 1. **后端处理**: - 首先,获取前端传递的回调函数名,这里是`callback`参数:`String callback = request.getParameter("callback")`。 - 然后,构建JSONP格式的响应。这里我们创建一个字符串`json`,包含回调函数名和返回的JSON数据:`json = jsonpcallback + "({returnFlag:" + bln + ",taskid:" + taskid + "});"`。 - 最后,设置响应的输入流,将JSONP字符串作为内容返回:`setInputStream(new ByteArrayInputStream(json.getBytes("UTF-8")));`,并返回ACTION的SUCCESS状态。 2. **前端使用jQuery AJAX请求**: - 设置AJAX请求的URL,注意添加了`callback=?`,这是jQuery自动替换为实际回调函数名的地方:`url: "http://localhost:8089/xx/xx/xx.action?callback=?",`。 - 指定请求类型为GET:`type: 'GET'`。 - 数据类型设置为JSONP:`dataType: "jsonp"`。 - 定义JSONP回调函数名:`jsonp: "callback"`,与后端匹配。 - 自定义回调函数名:`jsonpCallback: "jsonpcallback"`,如果后端有特殊要求或自定义处理。 - 在`success`函数中处理返回的数据,如`alert(resp.returnFlag)`。 - 添加`error`处理函数,用于捕获并显示错误信息。 在处理JSONP时,务必确保前后端的回调函数名一致,否则前端无法正确解析服务端返回的数据,可能会导致"parsererror"。同时,后端返回的数据必须严格按照JSONP的格式,即包裹在函数调用中,否则也会导致解析失败。 在上述代码示例中,前端通过`$.ajax`发送了一个带有`callback=?`的GET请求,后端接收到请求后根据`callback`参数生成了JSONP格式的响应`jsonpcallback({returnFlag:1,taskid:1})`,最后前端的`jsonpcallback`函数被调用,从而成功接收并处理了跨域数据。 总结来说,解决js跨域和"parsererror"的关键在于理解和正确实现JSONP机制,确保前后端关于回调函数的约定一致,并且服务端返回的数据格式符合JSONP的规范。
框架是struts +spring ,前端是 jquery
后台代码如下
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
String callback = request.getParameter("callback");
String jsonpcallback = request.getParameter("callback");
jsonpcallback = jsonpcallback == null ? "" : jsonpcallback;
String bln = "1";
String taskid = "1";
String json = jsonpcallback+ "({ returnFlag:"+bln+",taskid:"+taskid+"});";
setInputStream(new ByteArrayInputStream(json.getBytes("UTF-8")));
return SUCCESS;
前端js代码如下
$.ajax({
url : "http://localhost:8089/xx/xx/xx.action?callback=?", //(本地用8080,8089则是跨域了)
type:'GET',
dataType : "jsonp",
data:"{}", //不需要传数据时 ,也要写
jsonp: "callback",
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 5
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展