表单怎么使用ajax,jQuery中表单插件ajaxForm怎么用

jQuery中表单插件ajaxForm怎么用

发布时间:2021-07-15 12:48:15

来源:亿速云

阅读:70

作者:小新

这篇文章主要介绍jQuery中表单插件ajaxForm怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

引入两个文件,PS:必须

使用方法如下:

html代码:

标题:

图片:

js代码:

$('#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);

})

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

以上是“jQuery中表单插件ajaxForm怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery表单插件ajaxFormajaxSubmit都是用来实现表单提交的,其ajaxForm适用于所有的表单,而ajaxSubmit只适用于表单的input、select等元素,不能包含文件上传域。 ajaxForm使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxForm函数提交表单 ``` $(document).ready(function() { $('#form1').ajaxForm(function(data) { alert(data); }); }); ``` 其,#form1是表单的ID,data是服务器端返回的数据。 ajaxSubmit的使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxSubmit函数提交表单 ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ success: function(data) { alert(data); } }); return false; }); }); ``` 其,#form1是表单的ID,data是服务器端返回的数据。 ajaxSubmit还可以通过其他参数来设置表单提交的相关信息,如: ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ type: 'post', // 提交方式,get或post,默认为get url: 'submit.php', // 提交的URL地址 data: { // 提交的数据,键值对形式 username: 'admin', password: '123456' }, dataType: 'json', // 服务器返回的数据类型,text、xml、json等 success: function(data) { // 提交成功后的回调函数 alert(data); } }); return false; }); }); ``` 以上就是ajaxFormajaxSubmit的详细使用方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值