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

时间 2019-12-09

标签 jquery 请求 post 提交数据方法 sql 技术交流注明博客栏目 JQuery 繁體版

原文原文链接

无聊透顶，网上看看技术文章吸取下精华，无心中发现不少开发人员在跨域请求方面非常疑惑，本人整理了一下曾经写过的代码供苦苦寻找解决方案的IT人一点灵感，若是认为本身是高手呢那么您就能够潇洒的飘过了~~废话不说了省得招人烦~~javascript

1、get方式实现跨域请求html

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

发送数据: java

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; }
}jquery

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

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

string Jsondate = ToJSON(back);浏览器

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

Response.End();函数

OK ！jQqury.getJSON完结！！！！post

2、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);

完结！！！

但愿对你们有帮助