在jquery中ajax提交表單有post與get方式，在使用get方式時我們可以直接使用ajax 序列化表單$( 表單ID) serialize();就行了，下面我來介紹兩個提交表單數(shù)據(jù)的方法。$get方式提交表單get() 方法通過遠程HTTP ，下面我來介紹兩個提交表單數(shù)據(jù)的方法。
$get方式提交表單
get() 方法通過遠程 HTTP GET 請求載入信息
格式
$(selector).get(url,data,success(response,status,xhr),dataType)
請求 test.php 網(wǎng)頁，傳送2個參數(shù)，忽略返回值：
$.get("test.php", { name: "John", time: "2pm" } );
顯示 test.php 返回值(HTML 或 XML，取決于返回值)：
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});
ajax 序列化表單
$.Form.serialize( NameValuePair )
虛擬一個表單，并設(shè)置表單控件名與值。
參數(shù)
NameValuePair
必選項。設(shè)置虛擬的表單控件。該參數(shù)形式為：{ name1=value, name2=value2, ......}
返回值
虛擬表單序列化后的字符串，其格式如：username=%E5%95%8A%E8%94%A1password=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=1b;=2c;=3d;=4e;=5
$POST方式提交表單
$.post
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行異步請求
參數(shù)：
url (String) : 發(fā)送請求的URL地址.
data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示。
callback (Function) : (可選) 載入成功時回調(diào)函數(shù)(只有當Response的返回狀態(tài)是success才是調(diào)用該方法)。
$.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();
});
//提交前觸發(fā)的事件
$("#msg").ajaxSend(function(request, settings){$(this).append("li>Starting request at " + settings.url + "/li>");});
//這里的countryid 可以動態(tài)從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的值
//調(diào)用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請求失敗時添加一個被執(zhí)行的方法
$("#msg").ajaxError(function(request, settings){
$(this).append("li>Error requesting page " + settings.url + "/li>");
});
//當AJAX請求成功時添加一個被執(zhí)行的方法
$("#msg").ajaxSuccess(function(request, settings){
$(this).append(text[0]);
});
//清空文本里面的值
$("#%=this.typeName.ClientID%>").val("");
$("#%=this.showTypeDesc.ClientID%>").val("");
return false;
}
});
}
}
//獲取下拉菜單里面的文本內(nèi)容
function format_get_name(id)
{
var drp = $('%=drpCountry.ClientID%>');
for ( var i =0;idrp.options.length;i++)
{
if ( drp.options[i].value == id )
{
return drp.options[i].text;
}
}
return '';
}
/script>
以上內(nèi)容就是腳本之家小編給大家分享的Jquery中ajax提交表單幾種方法(get、post兩種方法)，希望對大家有所幫助。
您可能感興趣的文章:- Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程
- Nginx服務(wù)器中處理AJAX跨域請求的配置方法講解
- 原生 JS Ajax,GET和POST 請求實例代碼
- 如何解決Ajax訪問不斷變化的session的值不一致以及HTTP協(xié)議中的GET、POST的區(qū)別
- jQuery中Ajax的get、post等方法詳解
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
- 使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法
