当前位置: 首页 > 编程笔记 >

jQuery基于Ajax方式提交表单功能示例

轩辕瑞
2023-03-14
本文向大家介绍jQuery基于Ajax方式提交表单功能示例,包括了jQuery基于Ajax方式提交表单功能示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jQuery基于Ajax方式提交表单功能。分享给大家供大家参考,具体如下:

提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单。下面完整的介绍一个表单采用ajax方式提交的流程

一、准备

1、页面引入jQuery文件

2、页面引入jQuery的表单插件jQuery.form.js

二、实施

1、页面中的表单

<form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information">
   <input type="text" name="UserName" value="" />
   <div class="jsrz_main_button">
        <input type="submit" value="提交" id="agreementSub">
    </div>
</form>

2、提交表单的代码

$("#agreementSub").on("click",function(){
    $('#mainForm').ajaxSubmit( //ajax方式提交表单
      {
        url: '/personal/kaike',
        type: 'post',
        dataType: 'json',
        beforeSubmit: function () {},
        success: function (data) {
          if (data.Res == "True" || data.Res == true) {
            $('.jsrz_main_check').html('您的申请已提交,我们将会在1-2个工作日内进行审核,请耐心等待!');
          } else {
            alert(data.Msg);
          }
        },
        clearForm: false,//禁止清楚表单
        resetForm: false //禁止重置表单
      });
});

点击提交按钮触发绑定的click事件。

$('#mainForm').ajaxSubmit()//中的代码部分也可以封装为一个方法,在其他地方调用。

三、不使用jQuery.from表单插件的方式

$("#maniForm").submit(function (envent)
{
  envent.preventDefault();
  var form = $(this);
  $.ajax({
    url: form.attr("action"),
    type: form.attr("mathod"),
    data: form.serialize(),
    dataType: "json",
    beforeSend: function ()
    {
      $("#ajax-loader").show();
    },
    error: function ()
    {
    },
    complete:function () {
      $("#ajax-loader").hide();
    },
    success: function (data)
    {
      $("#article").html(data);
    }
  });
});

注:表单中必须有类型为submit的input按钮,用来激活submit方法。此种提交方式只能提交表单中比较简单的文本项,对于file类型的数据无法进行提交。input提交按钮的id和name属性的值不能为submit,否则会造成冲突而无法提交表单。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 类似资料:
  • 问题内容: 此代码正确吗?我正在尝试提交,如果文本区域再次为空,我也想提交。 我正在尝试上传: 谢谢… 问题答案: 用 代替 如果您使用的是最新版本的jquery。

  • 问题内容: 我有一个带有名称和未定义输入数量的表单。 我想做某种jQuery.get或ajax或类似的事情,它将通过Ajax调用页面,并发送表单的所有输入。 我想一种方法是做类似的事情 但是我不完全知道所有的表格输入。是否有仅发送所有表单输入的功能部件或功能? 问题答案: 您可以使用Ajax表单插件中的ajaxForm / ajaxSubmit函数或jQuery序列化函数。 AjaxForm :

  • 本文向大家介绍jQuery基于正则表达式的表单验证功能示例,包括了jQuery基于正则表达式的表单验证功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery基于正则表达式的表单验证功能。分享给大家供大家参考,具体如下: 附:常用的js验证函数: 网站首页表单js: 正则表达式特殊字符的过滤: PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用: JavaScri

  • 本文向大家介绍Jquery基于Ajax方法自定义无刷新提交表单Form实例,包括了Jquery基于Ajax方法自定义无刷新提交表单Form实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法。分享给大家供大家参考。具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交

  • 问题内容: 我有一个要通过jQuery捕获并通过AJAX发送的表单。我的问题是,每次刷新页面时,表单都会提交多次。 我尝试取消绑定“提交”按钮,但通常在第一次提交后发布表单。任何帮助,将不胜感激 问题答案: 您最有可能正在使用或触发ajax事件。试试这个:

  • 问题内容: 我的表单中有两个选择元素,类别和子类别。首先,仅显示类别选择。当用户在类别选择中进行选择时,AJAX请求将发送到服务器,并显示子类别选择。它工作正常。 现在,当表单提交中由于任何原因,缺少某些必需的值或任何原因而出现错误时,我将显示错误消息,但是我无法保留选择框的相同状态,我只会看到类别选择,未选择任何值,即初始状态。谁能建议我如何保留这些选择元素的状态? 这是我新表单中的代码段: 这