Jquery表单插件ajaxForm

前端时间写项目用到了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中分别做的处理,比较蛋疼……

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值