首页 > Web开发 > 详细

关于ajax和submit的技术结合

时间:2015-05-21 22:42:33      阅读:372      评论:0      收藏:0      [点我收藏+]

最近编程有一个需求:本页面上传文件后,弹出模态框,显示后端返回的内容。再根据模态框的指示做其他操作。

$.ajax()提交多次发现总是失败。

发现ajax是不能直接提交"multipart/form-data"类型的数据,需要用到jquery.form.js中的$.ajaxSubmit()方法。

插件下载地址: http://plugins.jquery.com/form/

你的模板XXX.html:


<script>
function file_upload(){
            var thisForm = $("form[enctype='multipart/form-data']");
                   
                    var options = {
                        url: xxx,
                        type: "post",
                        dataType: "json",
                        data: $(thisForm).serializeArray(),
                        success: function(data){
                            var content = JSON.stringify(data);
                            
                            });
                        }
                    }
                    $(thisForm).ajaxSubmit(options);
                    $(thisForm).resetForm(); //表单重置
                    return false;   //阻止默认行为  
}
</script>
<form action="" method="post" enctype="multipart/form-data" role="form">
......此处省略几百字
<input type="button" onclick="return file_upload();"/>
</form>

注意上面的“提交”按钮的type不要设为"submit",否则表单默认跳转action后的url,提交给action对应的处理函数处理。

当然,$("form[enctype=‘multipart/form-data‘]").submit({})方法也是不可用的。

onclick事件需要return ,否则也会有其默认行为。

关于ajax和submit的技术结合

原文:http://blog.csdn.net/duomoke/article/details/45895823

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!