貌似AJAX越來越火了，作為一個WEB程式開發人員要是不會這個感覺就要落伍，甚至有可能在求職的時候屢被淘汰。我也是一個WEB程式開發人員，當然我也要“隨波逐流”一把，不然飯碗不保啊。
之前實現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("該客戶編碼可用!");}}
<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;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
