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

Question

我正在尝试使用“AJAX”上传文件，处理文件中的数据，然后将其中一些数据返回到 UI，以便我可以动态更新屏幕。

我正在使用 JQuery Ajax 表单插件 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, jqForm, options);
                },
        }
    $form.submit(function(){
        $(this).ajaxSubmit(options);
        return false;
    });
    $form.ajaxSubmit(options);
}

正如您所看到的，我非常希望看到成功回调函数起作用，并且只是在成功时创建一条警报消息。然而，我们从未接到那个电话。此外，不会调用 error 函数，而是执行 beforeSubmit 函数。

我取回的文件包含以下内容:

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

我在这里使用“成功”来表示服务器是否能够充分运行 post 命令。如果失败，结果将类似于:

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

非常感谢您的时间和帮助。我已经为此花费了几天时间，并且很乐意继续前进。

Answer 1

好吧，我只是花了几个小时来解决同样的问题，逐行检查 js 文件。前一秒还在工作，下一秒就不行了。我的问题是 - 我删除了结果的目标 div。一旦我把它放回去，它就工作得很好。