jQuery跨域请求，跨域Post提交数据的方法（.net/SQL技术交流群206656202 入群需注明博客园）

2023-10-22 08:24:34

无聊透顶，网上看看技术文章吸收下精华，无意中发现很多开发人员在跨域请求方面很是疑惑，本人整理了一下曾经写过的代码供苦苦寻找解决方案的IT人一点灵感，如果认为自己是高手呢那么您就可以潇洒的飘过了~~废话不说了免得招人烦~~

一、get方式实现跨域请求

这里我使用jQuery.getJSON()函数实现
a站点 http://bj.xxxx.com.aspx 请求b站点 http://sjz.xxxx.com.aspx，演示代码向b站点发送用户名密码请求登录

发送数据:

html>
<head><title>getJSON跨域请求</title>
</head>
<body>
<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
 $(function(){
   var _username = "用户名";
   var _pwd = "密码";
   /*

jsoncallback不能写到发送的json数据中，否则有可能出现服务端接受不到数据的问题
实际上发送出去的请求是这样的
http://sjz.xxxx.com.aspx?action=CheckLogin&username=qsak47&password=123456&jsoncallback=jQuery16406769416032866459_1393165804461&_=1393165804718

*/

   $.getJSON("http://sjz.xxxx.com.aspx?action=CheckLogin&jsoncallback=?"
　　　　,{
　　　　　　"username":_username,"password":_pwd
　　　　},function(data){
          //回调函数中对返回值进行一系列操作
　　　　   alet(data.msg);
　　});
 });

</script>
</body>
</html>

服务端接收数据处理请求(该怎么接收还是怎么接收)：

   string username=Request.QueryString.Get("username");
   string password=Request.QueryString.Get("password");
   string jsoncallback = Request.QueryString.Get("jsoncallback");

  OK 这样我们在b站点就拿到值了，这里模拟的是登录，如果b站点想告诉a站点OK 验证通过你可以登录，那么就需要将数据返回给a站点，我们应该这样做

  我习惯用一个类来封装返回值

        public class JsonBack

{
/// <summary>
/// 处理请求是否成功
/// </summary>
public int code { get; set; }
/// <summary>
/// 提示
/// </summary>
public string msg { get; set; }
/// <summary>
/// 序列化数据
/// </summary>
public object data { get; set; }
}

/// <summary>
/// 序列化
/// </summary>
/// <param name="obj">数据对象</param>
/// <returns>序列化结果</returns>
public static string ToJSON(object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}

Jsonback back = new JsonBack{code=1,msg="登录成功",data=true};

string Jsondate = ToJSON(back);

Response.Write(jsoncallback + "(" + Jsondate + ")");

Response.End();

OK ！jQqury.getJSON完结！！！！

二、Post方式

由于getJSON方式是get请求，参数都是通过url传递过去的，对于小量数据传输是没问题的，http协议对于url长度并没有做限制，而是浏览器厂商进行了限制具体最大长度是多少浏览器之间是不同的，这方面信息多的很我就不废话了，我们可以使用firebug进行测试，当url过长的时候会出现404错误。

有这么一种情况，a站点的其中某个页面需要向b站点提交大量数据，但是又不能修改a站点页面的html内容只能用js来实现，但是数据还是得提交啊，没关系本人奉上解决方案，前提是a站点的页面引用了一个js文件:a.js

//Post提交数据 PARAMS 为json格式参数
function post(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}

原理很简单，js动态创建了一个隐藏的form表单，指定提交的url、请求方式为Post，有多少个参数创建多少个textarea, 为每个textarea设置name属性，值分别为参数的名称，textarea的值为参数的值，将textarea添加到form表单中，将form表单添加到body中，OK ！！！！！

接下来

var data = "大量数据1";

var comment="大量数据2";

var params = {"data":data,"comment":comment};

//调用post提交数据

post("http://sjz.xxxx.com",params);

完结！！！

希望对大家有帮助

jQuery跨域请求，跨域Post提交数据的方法（.net/SQL技术交流群206656202 入群需注明博客园）

码农公寓

相关文章