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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
JavaScript实现动态生成表格
Aug 02 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
JS实现放烟花效果
2020/03/10 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
pandas数据分组和聚合操作方法
2018/04/11 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
详解Python IO口多路复用
2020/06/17 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
自荐信怎么写好
2013/11/11 职场文书
美术国培研修感言
2014/02/12 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年质检工作总结
2015/05/04 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server