jQuery表单插件ajaxForm实例详解


Posted in Javascript onJanuary 17, 2017

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度。

引入两个文件,PS:必须

<script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery.form.min.js"></script>

使用方法如下:

html代码:

<form method="post" action="#" id="submit">
  标题:<input type="text" name="title" value=""/>
  图片:<input type="file" name="image"/>
  <input type="button" value="提交" id="button"/>
</form>

js代码:

<script type="text/javascript">
  $('#button').click(function(){
    var options = {
      type:'post',           //post提交
      url:'http://ask.tongzhuo100.com/server/****.php?='+Math.random(),   //url
      dataType:"json",        //json格式
      data:{'name':name,....},    //如果需要提交附加参数,视情况添加
      clearForm: true,        //成功提交后,清除所有表单元素的值
      resetForm: true,        //成功提交后,重置所有表单元素的值
      cache:false,          
      async:false,          //同步返回
      success:function(data){
        //服务器端返回处理逻辑
      },
      error:function(XmlHttpRequest,textStatus,errorThrown){
        alert('操作失败');
      }
    };
    $('#submit').ajaxSubmit(options);
  })
</script>

用法大概就是这样,其中遇到两个坑,本人把ajaxform封装了一个方法,因为项目中多次用到,然后用的同步请求,这样好做处理,但是没有图片上传的情况下,同步是可以的,能够兼容到ie7,但是如果有图片上传,ie 7、8、9 同步就无法做处理了,只能异步了,所以当时只能写成异步了,在success中分别做的处理,比较蛋疼……

以上所述是小编给大家介绍的jQuery表单插件ajaxForm实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
node.js从数据库获取数据
May 08 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
js实现手机拍照上传功能
Jan 17 #Javascript
angular实现form验证实例代码
Jan 17 #Javascript
基于jQuery实现数字滚动效果
Jan 16 #Javascript
5种JavaScript脚本加载的方式
Jan 16 #Javascript
WebPack基础知识详解
Jan 16 #Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 #Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
python中re模块知识点总结
2021/01/17 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
2019年Java面试必问之经典试题
2012/09/12 面试题
一套C++笔试题面试题
2012/06/06 面试题
java程序员面试交流
2012/11/29 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
领导干部培训感言
2014/01/23 职场文书
综合实践教学反思
2014/01/31 职场文书
简历里的自我评价范文
2014/02/24 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
奖励申请报告范文
2015/05/15 职场文书