`

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

 
阅读更多

一：Url参数提交数据


<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><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>

后台代码：


<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->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提交数据
前台代码：

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><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">&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>
后台代码：

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->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用于帮助操作表单的一个插件，具体的去网上看看教程！

分享到：
| Create Hello World application in Spring ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery ajax提交表单数据的两种实现方法

    Jquery AJAX提交表单有两种方式，一是url参数提交数据，二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素很多的话建议用第二种方式进行提交，当然你要是想练练“打字水平”的...

    Jquery中ajax提交表单几种方法(get、post两种方法)

    在jQuery中，Ajax提交表单是常见的数据交互方式，它允许我们在不刷新页面的情况下与服务器交换数据并更新部分网页内容。主要使用到的两种方法是GET和POST，这两种方法各有特点，适用于不同的场景。 首先，GET方法是...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证，该代码不但有针对property验证，也有针对object验证，还有一个异步获取对象的实例；包含完整的代码和库文件；在myeclipse8.5和apache-tomcat-6.0.30测试通过；访问网址：...

    jquery ajax 如何向jsp提交表单数据

    在 jQuery 中，向 JSP 提交表单数据主要有两种方式： 1. **URL 参数提交数据**： 这种方式适用于少量数据传输，将表单数据拼接成 URL 查询字符串并附在 AJAX 请求的 URL 后面。例如： ```javascript $.ajax({ ...

    Ajax使用jQuery提交表单

    二、jQuery表单提交的两种方式 1. **使用$.ajax()直接提交表单** 首先，获取表单元素，然后使用$.ajax()方法发送POST请求到服务器。例如： ```javascript $('#myForm').submit(function(event) { event....

    使用jQuery.form插件，实现完美的表单异步提交

    在Web开发中，异步表单提交是一种常见需求，它能提供更好的用户体验，因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、...

    jquery实现弹窗表单填写提交

    首先，jQuery弹窗通常通过两种方式实现：一种是使用插件，如jQuery UI的Dialog组件；另一种是自定义CSS和JavaScript代码。在这个项目中，可能是第二种方法，因为没有提及特定的插件。创建弹窗需要设置HTML结构，通常...

    jQuery异步提交表单的两种方式

    本文为大家分享了两种jQuery异步提交表单的方式，具体内容如下 第一种方式：普通ajax方式提交  $(function(){ $('#send').click(function(){ $.ajax({ type: GET, url: GLOBAL_PATH + /Enterprise/...

    JQuery.form表单提交参数详解.txt

    在 Web 开发中，使用 AJAX 进行异步表单提交是一种常见的技术手段，它允许开发者无需重新加载整个页面即可提交数据并接收响应结果。JQuery 提供了一个强大的插件——JQuery Form，它可以简化这一过程。本文将详细...

    jquery ajax异步提交表单数据的方法

    本篇文章将详细解释如何使用jQuery的`ajax`方法来实现异步提交表单，同时涵盖不包含文件和包含文件的两种情况。 ### 1. 不带文件的表单数据提交 当表单数据不包含文件时，我们可以使用`serialize()`方法将表单元素...

    AJAX提交表单数据实例分析

    首先，我们需要注意AJAX请求的两种主要类型：GET和POST。GET请求通常用于从服务器检索数据，而POST请求则通常用于向服务器提交数据。本文主要关注的是POST请求的实现。 AJAX调用的实现通常包括以下几个步骤： 1. ...

    ajax提交表单

    在使用jQuery进行AJAX表单提交时，最常用的方法是`$.ajax()`。下面将详细介绍该方法的使用及其选项参数： 1. **$.ajax()方法** ```javascript $.ajax([options]) ``` `$.ajax()`方法用于发送AJAX请求。它接受...

    jquery+ajax实现的表单分页，页面复杂表单数据的加载

    "jQuery+Ajax实现的表单分页，页面复杂表单数据的加载"是一种高效且用户友好的解决方案，能够提高网页性能，优化用户体验。本知识点主要围绕jQuery、Ajax、分页以及复杂表单的数据加载进行深入探讨。 首先，jQuery...

    按钮的Ajax请求时一次点击两次提交的解决方法

    下面详细探讨两种常用的解决办法。 ### 解决方案一：更改按钮的type属性 第一种解决方法是将按钮的type属性从submit改为button。这样做的好处是按钮不再触发表单的默认提交行为，代码示例如下： ```html ``` ...

    ajax异步提交表单

    通过上述分析，我们可以看到如何使用jQuery实现简单的AJAX表单提交功能。这种技术可以有效地减少页面刷新次数，提高用户的交互体验。同时，需要注意正确设置请求参数，合理处理请求的成功和失败情况，以及选择合适的...

    Asp.Net MVC之jQuery与AJAX操作实例

    在Asp.Net MVC框架中，jQuery和AJAX的结合使用极大地提升了用户体验，使得网页能够实现异步数据交互，无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...

Magicbox
Global site tag (gtag.js) - Google Analytics