本文实例讲述了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 】

相关推荐： Laravel中的Facade(门面)到底是什么原理  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  如何用AWS免费套餐快速搭建高效网站？  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  如何用西部建站助手快速创建专业网站？  JS去除重复并统计数量的实现方法  如何快速查询网址的建站时间与历史轨迹？  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  如何快速搭建自助建站会员专属系统？  iOS正则表达式验证手机号、邮箱、身份证号等  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  清除minerd进程的简单方法  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  EditPlus中的正则表达式实战(6)  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  手机软键盘弹出时影响布局的解决方法  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  详解MySQL数据库的安装与密码配置  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  使用Dockerfile构建java web环境  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  html5的keygen标签为什么废弃_替代方案说明【解答】  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  Laravel观察者模式如何使用_Laravel Model Observer配置  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  实例解析angularjs的filter过滤器  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  Android 常见的图片加载框架详细介绍  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  如何在宝塔面板中修改默认建站目录？  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  如何挑选最适合建站的高性能VPS主机？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Laravel如何创建自定义中间件？（Middleware代码示例）  智能起名网站制作软件有哪些,制作logo的软件？  如何确认建站备案号应放置的具体位置？  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  微信小程序 wx.uploadFile无法上传解决办法  Linux网络带宽限制_tc配置实践解析【教程】