jquery ajax提交表单数据的两种方式

最新推荐文章于 2024-10-01 13:22:20 发布

CHCH998

最新推荐文章于 2024-10-01 13:22:20 发布

阅读量293

点赞数

原文地址为： jquery ajax提交表单数据的两种方式

　　　　貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！

　　　　之前实现AJAX使用Javascript脚本一个一个敲出来的，很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了，当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式，一是url参数提交数据，二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素很多的话建议用第二种方式进行提交，当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可，相信开发者都不想费白劲吧！废话不多说了贴实例。

首先要下载Jquery、Jquery.form这两个插件，网上很多的！

一：Url参数提交数据

Code
<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>

后台代码：

Code
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提交数据

前台代码：

Code
<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>

后台代码：

Code