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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
angular.element方法汇总
Jan 07 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
js校验开始时间和结束时间
May 26 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
我的论坛源代码(四)
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
php实现插入排序
2015/03/29 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
js的一些常用方法小结
2011/06/29 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python实现的选择排序算法示例
2017/11/29 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python 多线程重启方法
2019/02/18 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
贸易经济专业自荐书
2014/06/29 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
银行稽核岗位职责
2015/04/13 职场文书
建筑工程催款函
2015/06/24 职场文书
党校培训学习心得体会
2016/01/06 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL