本文实例讲述了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方式实现用户名存在性检查功能示例  # 表单  # 您的  # 操作技巧  # 相关内容  # 还在  # 会在  # 感兴趣  # 给大家  # 提交后  # 能为  # 更多关于  # 此种  # 则会  # 所述  # 绑定  # 程序设计  # 跳转到  # 请耐心等待  # 选择器  # 新页面 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 电商网站制作价格怎么算,网上拍卖流程以及规则？  如何在万网主机上快速搭建网站？  Java类加载基本过程详细介绍  敲碗10年！Mac系列传将迎来「触控与联网」双革新  网站建设保证美观性，需要考虑的几点问题！  Laravel怎么判断请求类型_Laravel Request isMethod用法  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  Laravel distinct去重查询_Laravel Eloquent去重方法  如何自定义建站之星模板颜色并下载新样式？  Laravel怎么清理缓存_Laravel optimize clear命令详解  微信小程序 五星评分(包括半颗星评分)实例代码  利用JavaScript实现拖拽改变元素大小  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  Firefox Developer Edition开发者版本入口  JavaScript如何实现继承_有哪些常用方法  WEB开发之注册页面验证码倒计时代码的实现  再谈Python中的字符串与字符编码（推荐）  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  Python结构化数据采集_字段抽取解析【教程】  制作企业网站建设方案,怎样建设一个公司网站？  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  如何确认建站备案号应放置的具体位置？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  移动端脚本框架Hammer.js  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  香港服务器选型指南：免备案配置与高效建站方案解析  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  如何在Windows虚拟主机上快速搭建网站？  如何撰写建站申请书？关键要点有哪些？  香港服务器租用费用高吗？如何避免常见误区？  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  EditPlus中的正则表达式 实战(4)  非常酷的网站设计制作软件,酷培ai教育官方网站？  如何挑选优质建站一级代理提升网站排名？  详解vue.js组件化开发实践  浅谈Javascript中的Label语句  Laravel如何创建自定义Artisan命令？（代码示例）  Python正则表达式进阶教程_复杂匹配与分组替换解析  如何快速生成可下载的建站源码工具？  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  长沙做网站要多少钱,长沙国安网络怎么样？  装修招标网站设计制作流程,装修招标流程？  Bootstrap整体框架之CSS12栅格系统  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全