貌似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(           "该客户编号可用!"           );          
                      }          
                      }

二: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;          
                      }