Jquery中$.ajax $.post load用法與區別

來源:互聯網
上載者:User

$.ajax用法

 代碼如下 複製代碼

function getVerify(){
 if($('#regRuser').val()){
  var m=$('#regRuser').val();
  if(/^13d{9}$/g.test(m)||(/^15[0-35-9]d{8}$/g.test(m))|| (/^18d{9}$/g.test(m))){
   var postData = $('#reg_form').serialize();
   $.ajax({
    type: "POST",
    url: "/ajax/getVerify",
    data: postData,
    success: function(msg){
     if(msg>0){
      alert('驗證碼已發送至您手機,請注意查收');
      $('#getVerify').hide();
      $('.regnav').css('background','url(/static/images/v10/regnav2.png)');
      $('#checkvalidate').show();
      f_timeout();
      $('.abc').show();
     }else if(msg==0){
      alert('手機號已被註冊');
     }
    }
   });
  }else{
   alert('請輸入正確的手機號');
  }
 }
}

心細的朋友會發現中間有一個postData資料,而是由$('#reg_form').serialize();產生了,那麼$('#reg_form').serialize();會是什麼資料來,我們來簡單舉個執行個體

$.Form.serialize( NameValuePair )

虛擬一個表單,並設定表單控制項名與值。

參數
NameValuePair
必選項。設定虛擬表單控制項。該參數形式為:{ name1=value, name2=value2, ......}
傳回值
虛擬表單序列化後的字串,其格式如:username=%E5%95%8A%E8%94%A1&password=123456

描述
表單中如有 disabled=true 或者沒有 name 屬性的控制項將被忽略。同名控制項將發送一組同名但不同值的字串。該方法通常用於 Ajax 的提交參數(parameters)。

樣本

 代碼如下 複製代碼

<form method="post" name="reg" action="http://localhost">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="checkbox" name="interest" value="music" /> //新使用者興趣愛好調查,勾選
  <input type="checkbox" name="interest" value="sport" /> //勾選
  <input type="checkbox" name="interest" value="dance" /> //勾選
  <input type="submit" value="使用者註冊" />
  <input type="button" value="用JavaScript提交表單" onclick="test()" />
</form>
<script type="text/javascript" >
function test(){
     alert( $.Form("reg").serialize( { regTime:new Date().toGMTString()} ) );  //serizlize 方法補充了一個時間控制項,控制項的name=regTime,值為目前時間。

//username=%E5%95%8A%E8%94%A1&password=123456&interest=music&interest=sport&interest=dance&regtime=Thu%2C%2027%20Sep%202007%2008%3A35%3A55%20UTC。
//注意裡面的同名表單
}
</script>

從上面可以看得出來這個是ajax get格式了,資料量不能太大了。


$.post

jQuery.post( url, [data], [callback], [type] ) :使用POST方式來進行非同步請求


參數:

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給伺服器的資料,以 Key/value 的索引值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

type (String) : (可選)官方的說明是:Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)

.post("Ajax.aspx", { Action: "post", Name: "lulu" },        function (data, textStatus){            // data 可以是 xmlDoc, jsonObj, html, text, 等等.      //this;    // 這個Ajax請求的選項配置資訊,請參考jQuery.get()說到的this     alert(data.result);        }, "json");點擊提交:

執行個體

 代碼如下 複製代碼

function  sendMsg()
{
 var isphone=  checkPhone($("#username").val());
 if(!isphone )
 {
  $("#btn").val("發送中...");
  $.post("momsg.php",{"tel":$("#username").val()},function(data){
    //alert(data);
    if(data==0)//0  成功  1  不成功  2 手機號碼格式不對
    {     
     //    
    }    
    
  });
 }
 else
 {
  alert('請輸入正確的手機號碼!');$("#username").focus();
 }
 
}

這個最核心的一句是$.post("momsg.php",{"tel":$("#username").val()}了,這裡什麼意思,這個就是ajax $.post 與php或提交表單post是一樣的,前面欄位名,後來變數或數值。


$('#xxx').load(url,para)


調用load方法的完整格式是:load( url, [data], [callback] ),

•url:是指要匯入檔案的地址。
•data:選擇性參數;因為Load不僅僅可以匯入靜態html檔案,還可以匯入動態指令碼,例如PHP檔案,所以要匯入的是動態檔案時,我們可以把要傳遞的參數放在這裡。
•callback:選擇性參數;是指調用load方法並得到伺服器響應後,再執行的另外一個函數。

 代碼如下 複製代碼

$("#content").load("你自己的網站下的xx.aspx");

在你的xx.aspx裡使用WebRequest訪問"http://www.baidu.com,將結果返回給js

一:如何使用data

1.載入一個php檔案,該php檔案不含傳遞參數

 代碼如下 複製代碼
$("#myID").load("test.php");

//在id為#myID的元素裡匯入test.php運行後的結果
2. 載入一個php檔案,該php檔案含有一個傳遞參數

 代碼如下 複製代碼

$("#myID").load("test.php",{"name" : "Adam"});

//匯入的php檔案含有一個傳遞參數,類似於:test.php?name=Adam
3. 載入一個php檔案,該php檔案含有多個傳遞參數。註:參數間用逗號分隔

 代碼如下 複製代碼

$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

//匯入的php檔案含有一個傳遞參數,類似於:test.php?name=Adam&site=61dh.com

4. 載入一個php檔案,該php檔案以數組作為傳遞參數

 代碼如下 複製代碼

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//匯入的php檔案含有一個數組傳遞參數。
注意:使用load,這些參數是以POST的方式傳遞的,因此在test.php裡,不能用GET來擷取參數

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.