微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery ajax表单成功回调未被调用

我试图使用“ AJAX上传文件,在文件中处理数据,然后将一些数据返回给UI,以便我可以动态更新屏幕.

我正在使用JQuery Ajax Form Plugin,jquery.form.js在http://jquery.malsup.com/form/找到javascript,并在后端使用Django.表单正在提交,后台的处理过程没有问题,但是当从服务器收到响应时,我的Firefox浏览器会提示我下载/打开一个“application / json”类型的文件.该文件具有我一直尝试发送到浏览器的json内容.

我不相信这是我发送json的问题,因为我有一个模块化的json_wrapper()函数,我在同一个应用程序的多个地方使用.

以下是我应用Django模板后的形式:

<form method="POST" enctype="multipart/form-data" action="/test_suites/active/upload_results/805/">
  <p>
     <label for="id_resultfile">Upload File:</label> 
     <input type="file" id="id_resultfile" name="resultfile">
  </p>  
</form>

你不会看到任何提交按钮,因为我正在调用提交与一个按钮其他地方,并在jquery.form.js插件使用ajaxSubmit().

这是控制javascript代码

function upload_results($dialog_Box){
    $form = $dialog_Box.find("form");
    var options = {
            type: "POST",success: function(data){
                alert("Hello!!");
            },dataType: "json",error: function(){
                console.log("errors");

            },beforeSubmit: function(formData,jqForm,options){
                    console.log(formData,options);
                },}
    $form.submit(function(){
        $(this).ajaxSubmit(options);
        return false;
    });
    $form.ajaxSubmit(options);
}

正如你所看到的,我已经迫不及待地看到成功的回调函数工作,并且只需要在成功时创建一个警报消息.但是,我们从来没有达到这个要求.此外,不调用错误函数,执行beforeSubmit函数.

我收到的文件有以下内容

{"count": 18,"Failed": 0,"completed": 18,"success": true,"trasaction_id": "SQEID0.231"}

在这里使用’成功’来表示服务器是否能够充分地运行post命令.如果失败,结果将如下所示:

{"success": false,"message":"<error_message>"}

你的时间和帮助是非常感谢.我现在已经花了几天时间,很乐意继续前进.

解决方法

如果有人遇到类似的问题,这里是最终的JavaScript我最终使用:
function upload_results_dialog($data_elem){
    var $dialog_Box = $("#ajax-dialog-Box"),data = $data_elem.attr("data");
    $.ajax({
        url: "../upload/" + data+ "/",success: function(response){
            $dialog_Box.html(response);
            $dialog_Box.dialog("option",{
                    title: "Upload",height: 260,width: 450,buttons: {
                        Cancel: function(){
                            $(this).dialog('close');
                        },Upload: function(){
                            upload($(this));
                        }
                    }
                }
            );
            $dialog_Box.dialog('open');
        }
    });
}
function upload($dialog_Box){
    var $form = $dialog_Box.find("form"),iframe = $dialog_Box.find("iframe"),$html = $($iframe.contents()),$iframe_form = $html.find("form");
    $iframe_form.html($form.contents());

    //Set the onload function
    $iframe.attr("onload","check_file_uploaded_valid()");
    $iframe_form.submit();
}

原文地址:https://www.jb51.cc/jquery/179302.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐