Jquery中ajax提交表單幾種方法(get、post兩種方法)_AJAX相關

在jquery中ajax提交表單有post與get方式，在使用get方式時我們可以直接使用ajax 序列化表單$( 表單ID) serialize();就行了，下面我來介紹兩個提交表單資料的方法。$get方式提交表單get() 方法通過遠程HTTP ，下面我來介紹兩個提交表單資料的方法。

$get方式提交表單

get() 方法通過遠程 HTTP GET 請求載入資訊

格式

$(selector).get(url,data,success(response,status,xhr),dataType)

請求 test.php 網頁，傳送2個參數，忽略傳回值：

$.get("test.php", { name: "John", time: "2pm" } );

顯示 test.php 傳回值(HTML 或 XML，取決於傳回值)：

$.get("test.php", function(data){ alert("Data Loaded: " + data);});

ajax 序列化表單

$.Form.serialize( NameValuePair )

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

參數

NameValuePair

必選項。設定虛擬表單控制項。該參數形式為：{ name1=value, name2=value2, ......}

傳回值

虛擬表單序列化後的字串，其格式如：username=%E5%95%8A%E8%94%A1&password=123456

<form> <div><inputtype="text"name="a"value="1"id="a"/></div> <div><inputtype="text"name="b"value="2"id="b"/></div> <div><inputtype="hidden"name="c"value="3"id="c"/></div> <div> <textareaname="d"rows="8"cols="40">4</textarea> </div> <div><selectname="e"> <optionvalue="5"selected="selected">5</option> <optionvalue="6">6</option> <optionvalue="7">7</option> </select></div> <div> <inputtype="checkbox"name="f"value="8"id="f"/> </div> <div> <inputtype="submit"name="g"value="Submit"id="g"/> </div> </form> .serialize() 方法可以操作已選取個別表單元素的 jQuery 對象，比如 <input>, <textarea> 以及 <select>。不過源碼天空，選擇 <form> 標籤本身進行序列化一般更容易些： $('form').submit(function(){ alert($(this).serialize()); returnfalse; });

輸出標準的查詢字串：

a=1&b;=2&c;=3&d;=4&e;=5

$POST方式提交表單

$.post

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

參數：

url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。
callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

$.post("momsg.php",{"tel":$("#username").val()},function(data){if(data==0)//0 成功 1 不成功 2 手機號碼格式不對  {      //    }  });

通過 AJAX POST 請求改變 div 元素的文本：

$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){  $("span").html(result); });});

執行個體

<script type="text/javascript">function adddata()  {   var typeName=$("#<%=this.typeName.ClientID%>").val();   var msg=" not be empty";   if(typeName=="")   {    if(msg!="")     {      alert(msg);      return false;     }   }   else   {     //顯示進度條     $("#loading").ajaxStart(function(){     $(this).show();     });     //提交前觸發的事件     $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});     //這裡的countryid 可以動態從GridView裡面取     var countryid= $("#<%=this.drpCountry.ClientID%>").val();//擷取下拉式功能表值     var countryname=format_get_name(countryid);//擷取下拉式功能表文本     var typeName = $("#<%=this.typeName.ClientID%>").val();//擷取txt為typeName的值     var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//擷取txt為showTypeDesc的值      //調用Juqery Ajax      $.ajax({      type: "POST",      url: "addNews.aspx",      timeout: 20000,      error: function(){alert('error');},      data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc,      success: function(msg)      {      var text=msg.split('<');      //當AJAX請求失敗時添加一個被執行的方法      $("#msg").ajaxError(function(request, settings){      $(this).append("<li>Error requesting page " + settings.url + "</li>");      });      //當AJAX請求成功時添加一個被執行的方法      $("#msg").ajaxSuccess(function(request, settings){      $(this).append(text[0]);      });     //清空文本裡面的值      $("#<%=this.typeName.ClientID%>").val("");      $("#<%=this.showTypeDesc.ClientID%>").val("");      return false;      }      });   }  }  //擷取下拉式功能表裡面的常值內容  function format_get_name(id)  {    var drp = $('<%=drpCountry.ClientID%>');    for ( var i =0;i<drp.options.length;i++)    {      if ( drp.options[i].value == id )      {        return drp.options[i].text;      }    }    return '';  }</script>

以上內容就是雲棲社區小編給大家分享的Jquery中ajax提交表單幾種方法(get、post兩種方法)，希望對大家有所協助。