今天在做取消申请的时候遇到了一个跨域ajax提交的问题。
情景是:
系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败)
系统B为调用系统,PHP的站点,需要在页面中通过js调用这个取消接口。
由于A,B分别在不同的域名下,因此ajax调用的时候遇到了跨域的情况。
参考了:http://www.cnblogs.com/twobin/p/3395086.html
于是采用JSONP的方式进行了尝试。
首先,在接口页面中,通过get的参数进行处理逻辑,成功和失败后,均返回了一个jsonp的函数调用。
if (Request.QueryString["type"] != null) { if (Request.QueryString["type"].ToString() == "cancel") { string usercode = Request.QueryString["usercode"].ToString(); int userid = int.Parse(Request.QueryString["userid"].ToString()); int recordId = int.Parse(Request.QueryString["recordId"].ToString()); FLogic.Security.IIdentity id = new CDC.PowerESS.BLL.Workflow.Common.Model.IdentityImpl(userid,usercode,Guid.NewGuid()); var service = new CDC.PowerESS.FlexProvider.MonitorService(); try { service.SuspendProcess(id,recordId); Response.Write("jsonp({\"IsSuccess\":true});"); } catch (Exception ex) { Response.Write("jsonp({\"IsSuccess\":false});"); } } }
在调用方的js中,进行了如下的调用。
//取消申请 function cancelApply(recordId){ if (!confirm('确定取消申请?')) { return false; } $("#ItemContainer").empty(); $("#loadingDiv").show(); //跨域调用取消接口 if (oScript) { document.body.removeChild(oScript); } oScript = document.createElement('script'); oScript.src = gCancelApplyURL + '?type=cancel&usercode=' + gUserCode.Trim() + '&userid=' + gUserId.Trim() + '&recordId=' + recordId; document.body.appendChild(oScript); }
这段代码的主要功能是:
在页面中动态创建了一个script标签,动态分配src属性来完成数据的提交(get请求)。
同时,为了防止页面中不出现过多的script标签,动态创建的script标签对象保存在了全局变量 oScript中,每次create的时候检查一下全局对象有没有值,如果有,就先remove掉。
最后,由于这个get请求返回的是一个js 的方法调用,因此,在js里还要建立对应的处理方法:
//取消回调 function jsonp(json){ if (json['IsSuccess'] === true) { alert('取消申请成功!'); } else { alert('取消申请失败!'); } $("#loadingDiv").hide(); initPage(); }
这样,就可以对跨域请求到的结果进行处理了(json的方式)。
第一次亲自使用跨域ajax提交,感觉还不错~
原文链接:https://www.f2er.com/ajax/165612.html