jQuery表单插件ajaxForm实例详解

所属分类: 网络编程 / JavaScript 阅读数: 1061
收藏 0 赞 0 分享

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

引入两个文件,PS:必须

<script type="text/javascript" src="https://zhanzhang360.qulang.net/imgupload/000459/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://zhanzhang360.qulang.net/imgupload/000459/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实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多