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

完結！！！

但願對你們有幫助