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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
JS实现简易计算器
Feb 14 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
JS实现点击掉落特效
Jan 29 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
MVC模式的PHP实现
2006/10/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
js模拟滚动条(横向竖向)
2013/02/22 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jquery实现动态画圆
2014/12/04 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
在Django的session中使用User对象的方法
2015/07/23 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python with语句的原理与用法详解
2020/03/30 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
班级安全教育实施方案
2014/02/23 职场文书
导游个人求职信
2014/04/25 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
情感电台广播稿
2015/08/18 职场文书