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网页关键字高亮代码
Jul 30 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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函数代码
2013/08/29 PHP
PHP模块化安装教程
2016/06/01 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
vue.js的安装方法
2017/05/12 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python的pycurl包用法简介
2015/11/13 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Django框架模板的使用方法示例
2019/05/25 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
建筑专业自我鉴定
2013/10/22 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
致800米运动员广播稿
2014/02/16 职场文书
英文演讲稿
2014/05/15 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
个人党性分析材料
2014/12/19 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android