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


Posted in Javascript onFebruary 10, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
CCPry JS类库 代码
2009/10/30 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
什么是反射
2012/03/17 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
欢送会主持词
2015/07/01 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Win11查看设备管理器
2022/04/19 数码科技