快捷導航

jquery ajax提交表單數(shù)據(jù)的兩種實現(xiàn)方法

更新時間：2010年04月29日 22:51:06 作者：

貌似AJAX越來越火了，作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍，甚至有可能在求職的時候?qū)冶惶蕴Ｎ乙彩且粋€WEB程序開發(fā)者，當然我也要“隨波逐流”一把，不然飯碗不保??！

之前實現(xiàn)AJAX使用Javascript腳本一個一個敲出來的，很繁瑣。學習Jquery之后就感覺實現(xiàn)AJAX并不是那么的困難了，當然除了Jquery框架外還有其它的優(yōu)秀框架這里我就著重說下比較流行的Jquery。Jquery AJAX提交表單有兩種方式，一是url參數(shù)提交數(shù)據(jù)，二是form提交（和平常一樣在后臺可以獲取到Form表單的值）。在所要提交的表單中，如果元素很多的話建議用第二種方式進行提交，當然你要是想練練“打字水平”的話用第一種方式提交也未嘗不可，相信開發(fā)者都不想費白勁吧！廢話不多說了貼實例。
首先要下載Jquery、Jquery.form這兩個插件，網(wǎng)上很多的！
一：Url參數(shù)提交數(shù)據(jù)

復制代碼代碼如下:

 
<script type ="text/javascript" src ="../js/jquery.js"></script> 
<script type="text/javascript"> 
function checkCorpID()//檢測客戶編號是否可用 
{ 
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客戶編號輸入框 
{ 
alert("請輸入客戶編號!"); 
} 
else 
{ 
$("#checkFlag").html("正在檢測");//顯示提示信息 
$.ajax({ 
type: "get", 
url: "CheckCorpID.ashx", 
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表單，相當于CheckCorpID.ashx?ID=XXX 
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后臺傳過來的值 
}); 
} 
} 
</script> 

后臺代碼：

復制代碼代碼如下:

 
if(context.Request.Params["ID"].ToString()!="") 
{ 
Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO(); 
bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString()); 
if (flag) 
{ 
context.Response.Write("該客戶編號已被占用!"); 
} 
else 
{ 
context.Response.Write("該客戶編號可用!"); 
} 
} 

二：Form提交數(shù)據(jù)
前臺代碼：

復制代碼代碼如下:

 
<script type ="text/javascript" src ="../js/jquery.js"></script> //必須要引用 
<script type ="text/javascript" src ="../js/jquery.form.js"></script> //必須要引用 
<script type="text/javascript"> 
// wait for the DOM to be loaded 
$(document).ready(function() 
{ 
$('#Tip').hide();//顯示操作提示的元素不可見 
$('#form1').submit(function()//提交表單 
{ 
//alert("ddd"); 
var options = { 
target:'#Tip', //后臺將把傳遞過來的值賦給該元素 
url:'ReturnVisit.aspx?flag=do', //提交給哪個執(zhí)行 
type:'POST', 
success: function(){ alert($('#Tip').text());} //顯示操作提示 
}; 
$('#form1').ajaxSubmit(options); 
return false; //為了不刷新頁面,返回false，反正都已經(jīng)在后臺執(zhí)行完了，沒事！ 
}); 
} 
); 
</script> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="2" class="tableCategory">客戶回訪</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">客戶名稱：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回訪主題：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">聯(lián)系人：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">聯(lián)系人職務(wù)：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">聯(lián)系電話：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回訪時間：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回訪內(nèi)容：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回訪相關(guān)文檔：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">&nbsp;</td> 
<td class="tableBg2"> 
<asp:Button ID="Submit_BT" runat="server" Text="確定" CssClass="button" /> 
<input type="reset" class="button" value="還原" /> 
</td> 
</tr> 
</table> 
<span id="Tip"></span> 
</div> 
</form> 
</body> 

后臺代碼：

復制代碼代碼如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
{ 
if (Request.QueryString["flag"] != null && Request.QueryString["flag"].ToString() == "do") 
{ 
Pxt.Logic.DBRec.ReturnVisit bll = new Pxt.Logic.DBRec.ReturnVisit(); 
if (bll.Add(model(0)) > 0) 
{ 
Response.Write("操作成功！"); 
Response.End(); 
} 
} 
} 
} 
/**//// <summary> 
/// 根據(jù)不同需要，設(shè)定模型->獲取模型 
/// </summary> 
/// <param name="id">ID值</param> 
/// <returns></returns> 
private Pxt.Model.DBRec.ReturnVisit model(int id) 
{ 
//獲取表單值 
string F_CorpName = Request.Form["txtF_CorpName"].ToString(); 
string F_ReturnVisitTitle = Request.Form["txtF_ReturnVisitTitle"].ToString(); 
string F_ContractPerson = Request.Form["txtF_ContractPerson"].ToString(); 
string F_ContractPersonPosition = Request.Form["txtF_ContractPersonPosition"].ToString(); 
string F_ContractPhone = Request.Form["txtF_ContractPhone"].ToString(); 
DateTime F_ReturnVisitDate = DateTime.Parse(Request.Form["txtF_ReturnVisitDate"].ToString()); 
string F_ReturnVisitContent = Request.Form["txtF_ReturnVisitContent"].ToString(); 
string F_ReturnVisitFile = Request.Form["txtF_ReturnVisitFile"].ToString(); 
string Refer = Session["username"].ToString(); 
DateTime DoTime = DateTime.Now.Date; 
Pxt.Model.DBRec.ReturnVisit model = new Pxt.Model.DBRec.ReturnVisit(); 
if (id > 0)//修改記錄，否則表示增加記錄 
{ 
model.ID = id; 
} 
model.F_CorpName = F_CorpName; 
model.F_ReturnVisitTitle = F_ReturnVisitTitle; 
model.F_ContractPerson = F_ContractPerson; 
model.F_ContractPersonPosition = F_ContractPersonPosition; 
model.F_ContractPhone = F_ContractPhone; 
model.F_ReturnVisitDate = F_ReturnVisitDate; 
model.F_ReturnVisitContent = F_ReturnVisitContent; 
model.F_ReturnVisitFile = F_ReturnVisitFile; 
model.Refer = Refer; 
model.DoTime = DoTime; 
return model; 
} 