日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用jQuery實現(xiàn)跨域提交表單數(shù)據(jù)

我們在WEB開發(fā)中有時會遇到這種情況，比如要從A網(wǎng)站收集用戶信息，提交給B網(wǎng)站處理，這個時候就會涉及到跨域提交數(shù)據(jù)的問題。本文將給您介紹如何使用jQuery來實現(xiàn)異步跨域提交表單數(shù)據(jù)。

創(chuàng)新互聯(lián)業(yè)務包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設、高端網(wǎng)站設計、電子商務型網(wǎng)站建設、成都外貿(mào)網(wǎng)站制作(多語言)、電子商務商城網(wǎng)站建設、按需規(guī)劃網(wǎng)站、營銷型網(wǎng)站等。效率優(yōu)先，品質保證，用心服務是我們的核心價值觀，我們將繼續(xù)以良好的信譽為基礎，秉承穩(wěn)固與發(fā)展、求實與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質的互聯(lián)網(wǎng)服務！

在jQuery中，我們使用json數(shù)據(jù)類型，通過getJSON方法來實現(xiàn)從服務端獲取或發(fā)送數(shù)據(jù)，而當要向不同遠程服務器端提交或者獲取數(shù)據(jù)時，要采用jsonp數(shù)據(jù)類型。使用這種類型的話，會創(chuàng)建一個查詢字符串參數(shù) callback=? ，這個參數(shù)會加在請求的URL后面。服務器端應當在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個有效的JSONP請求。如果要指定回調(diào)函數(shù)的參數(shù)名來取代默認的callback。

注意，JSONP是JSON格式的擴展。他要求一些服務器端的代碼來檢測并處理查詢字符串參數(shù)。

HTML

在本例中，為了演示跨域提交數(shù)據(jù)，我們假設A網(wǎng)站域名為www.helloweba.com，B網(wǎng)站域名為demo.helloweba.com。我們在A網(wǎng)站創(chuàng)建一個簡單的表單，用于提交用戶信息。

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.    
      
    3. 
  
  
  
  
  3.    
     男生  
    4. 
  
  
  
  
  4.      女生 
      
    5. 
  
  
  
  
  5.    
      
    6. 
  
  
  
  
  6.    
      
    7. 
  
  
  
  
  7.    
    8.

jQuery

當用戶填寫完畢表單并點擊“提交”按鈕時，使用jQuery獲取表單信息，并通過getJSON提交給B網(wǎng)站，請看代碼：

 
 
 
 
    
  
  
  
  
  1. $(function(){  
    2. 
  
  
  
  
  2.     $("#myform").submit(function(){  
    3. 
  
  
  
  
  3.         var data = $(this).serialize(); //序列化表單數(shù)據(jù)  
    4. 
  
  
  
  
  4.         $.getJSON("http://demo.helloweba.com/jsonp.php?callback=?",data,function(json){  
    5. 
  
  
  
  
  5.             var msg = '';  
    6. 
  
  
  
  
  6.             if(json){  
    7. 
  
  
  
  
  7.                var  sex = json.sex==1? "男生":"女生";  
    8. 
  
  
  
  
  8.                msg = "< id='result'>提交成功！
    姓名：  
    9. 
  
  
  
  
  9.                "+json.username+"
    性別："+sex+"
    年齡："+json.age+""  
    10. 
  
  
  
  
  10.             }else{  
    11. 
  
  
  
  
  11.                msg = "服務器忙，請稍候再試！";  
    12. 
  
  
  
  
  12.             }  
    13. 
  
  
  
  
  13.             $("#myform").after(msg); //將返回信息插入頁面對應的元素后  
    14. 
  
  
  
  
  14.         });  
    15. 
  
  
  
  
  15.         return false;  
    16. 
  
  
  
  
  16.     });  
    17. 
  
  
  
  
  17. });  
    18.

從代碼中可以看出，首先將表單數(shù)據(jù)序列化，獲得json格式的表單數(shù)據(jù)，然后通過getJSON將數(shù)據(jù)發(fā)送給B網(wǎng)站URL：http://demo.helloweba.com/jsonp.php?callback=?，注意URL后面有個callback=?，將請求轉換為一個JSONP請求。然后根據(jù)B網(wǎng)站處理結果響應，并將響應結果動態(tài)顯示在A網(wǎng)站的表單提交頁面。

PHP

本例中，B網(wǎng)站的jsonp.php程序獲取A網(wǎng)站提交過來的表單數(shù)據(jù)，并將數(shù)據(jù)進行必要的處理（如有需要，可將數(shù)據(jù)過濾并插入數(shù)據(jù)庫中），然后返回JSON格式的數(shù)據(jù)給A網(wǎng)站的表單提交頁面。

 
 
 
 
    
  
  
  
  
  1. $result['username'] = $_GET['username'];  
    2. 
  
  
  
  
  2. $result['sex'] = $_GET['sex'];  
    3. 
  
  
  
  
  3. $result['age'] = $_GET['age'];  
    4. 
  
  
  
  
  4. echo $_GET['callback'].'('.json_encode($result).')';  
    5.

如果處理成功，會返回這樣一串字符串：jsonp1331385001001({"username":"\u5929\u70ed\u7279","sex":"1","age":"28"})。


分享名稱：使用jQuery實現(xiàn)跨域提交表單數(shù)據(jù)
分享鏈接：http://www.dlmjj.cn/article/djdiisc.html