首页 > 编程 > JavaScript > 正文

jQuery表单插件ajaxForm实例详解

2019-11-19 17:54:48
字体:
来源:转载
供稿:网友

前端时间写项目用到了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实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表