jquery ajax提交表單資料的兩種方式

來源:互聯網
上載者:User

之前實現AJAX使用Javascript指令碼一個一個敲出來的,很繁瑣。學習Jquery之後就感覺實現AJAX並不是那麼的困難了,當然除了Jquery架構外還有其它的優秀架構這裡我就著重說下比較流行的Jquery。Jquery AJAX提交表單有兩種方式,一是url參數提交資料,二是form提交(和平常一樣在後台可以擷取到Form表單的值)。在所要提交的表單中,如果元素很多的話建議用第二種方式進行提交,當然你要是想練練“打字水平”的話用第一種方式提交也未嘗不可,相信開發人員都不想費白勁吧!廢話不多說了貼執行個體。
首先要下載Jquery、Jquery.form這兩個外掛程式,網上很多的!
一:Url參數提交資料 複製代碼 代碼如下:<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提交資料
前台代碼: 複製代碼 代碼如下:<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', //提交給哪個執行
type:'POST',
success: function(){ alert($('#Tip').text());} //顯示操作提示
};
$('#form1').ajaxSubmit(options);
return false; //為了不重新整理頁面,返回false,反正都已經在後台執行完了,沒事!
});
}
);
</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">連絡人:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">連絡人職務:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">聯絡電話:</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">回訪內容:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回訪相關文檔:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1"> </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>
/// 根據不同需要,設定模型->擷取模型
/// </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;
}

註:Jquery.form是Jquery用於協助動作表單的一個外掛程式,具體的去網上看看教程!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.