jquery实现ajax提交表单信息的简单方法(推荐)


Posted in Javascript onAugust 24, 2016

最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery,基本上是现学现找,有点困难。

主要是扩展和拼接json转对象

很简单,附上代码:

; (function ($) { 
 
  $.fn.ajaxForm = function (options) { 
    var defaults = { 
      modelname: 'model',//后台对象接收名称 
      url: '/',//提交地址 
      postType: 'POST',//提交方式 
      dataType: 'JSON',//数据返回类型 
      async: false,//是否异步 
      optionObj: [],//自定义参数 
      callback: function () { },//成功回调 
    }; 
    var options = $.extend(defaults, options);//合并参数 
 
    if (options.url == '') { 
      alert('请填写提交地址'); 
      return; 
    } 
    var postvals = {}; 
 
    //textbox/隐藏域/textarea/radio选中值 
    $(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]:checked').each(function () { 
      if ($(this).val() != undefined) { 
        var name = $(this).attr('name'); 
        if (name == undefined || name == '') { 
          return false; 
        } 
        var value = $(this).val(); 
        var json = '{"' + name + '":"' + value + '"}'; 
        var obj = $.parseJSON(json); 
        postvals = $.extend(postvals, obj); 
      } 
    }); 
 
    var resObj; 
    if (options.optionObj != undefined || options.optionObj!=[]) { 
      resObj = $.extend(postvals,options.optionObj); 
    } else { 
      resObj = postvals; 
    } 
 
    $.ajax({ 
      type: options.postType, 
      dataType: options.dataType, 
      data: resObj, 
      async: options.async, 
      url: options.url, 
      success: function (json) { 
        if (json.IsError) { 
          alert(json.Message); 
        } else { 
          options.callback(); 
        } 
      } 
    }); 
  }; 
 
})(jQuery);

使用的话配合jquery validate使用

$("#system-form").validate({ 
  rules: { 
    SystemName: { 
      required: true
    }, 
    Description: { 
      required: true, 
    }, 
  }, 
  messages: { 
    SystemName: { 
      required: "请填写系统名称"
    }, 
    Description: { 
      required: "请填写系统描述"
    } 
  }, 
  submitHandler: function(form) { 
    var url = '/oa/system/' + $(form).attr('ftype'); 
    $(form).ajaxForm({ url: url,modelname:'system', callback: function() { 
      location.href = '/oa/system/index.html'; 
    } }); 
  } 
});

以上这篇jquery实现ajax提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
AngularJS下对数组的对比分析
Aug 24 #Javascript
AngularJS  $modal弹出框实例代码
Aug 24 #Javascript
AngularJS中比较两个数组是否相同
Aug 24 #Javascript
javascript深拷贝(deepClone)详解
Aug 24 #Javascript
js实现无缝循环滚动
Jun 23 #Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
You might like
PHP 表单提交给自己
2008/07/24 PHP
PHPCMS的使用小结
2010/09/20 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
详解vue组件基础
2018/05/04 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
连接Python程序与MySQL的教程
2015/04/29 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python numpy 反转 reverse示例
2019/12/04 Python
python构造函数init实例方法解析
2020/01/19 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
材料工程专业毕业生求职信
2014/03/04 职场文书
土地转让协议书范本
2014/04/15 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
员工薪酬激励方案
2014/06/13 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS