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 # Ajax方式 # 提交表单 # jquery easyUI中ajax异步校验用户名 # 基于jQuery实现Ajax验证用户名是否存在实例 # 使用struts2+Ajax+jquery验证用户名是否已被注册 # 基于jQuery实现的Ajax 验证用户名是否存在的实现代码 # Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存） # jquery ajax 检测用户注册时用户名是否存在 # jQuery基于ajax实现页面加载后检查用户登录状态的方法 # 原生和jQuery的ajax用法详解 # jquery ajax提交表单数据的两种方式 # jquery实现ajax提交form表单的方法总结 # jQuery使用ajaxSubmit()提交表单示例 # jQuery基于ajax方式实现用户名存在性检查功能示例 # 表单 # 您的 # 操作技巧 # 相关内容 # 还在 # 会在 # 感兴趣 # 给大家 # 提交后 # 能为 # 更多关于 # 此种 # 则会 # 所述 # 绑定 # 程序设计 # 跳转到 # 请耐心等待 # 选择器 # 新页面

返回目录在线咨询

上一篇：南通网站制作衣服店,南通女子遭遇“杀猪盘”，两百万投资*网站被骗惨, 你怎么看？
下一篇：企业自助建站系统安全吗？它能抵御网络攻击和数据泄露吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求