jquery ajax表单成功回调没有被调用

I'm trying to upload a file using "AJAX", process data in the file and then return some of that data to the UI so I can dynamically update the screen.

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

I'm using the JQuery Ajax Form Plugin, jquery.form.js found at http://jquery.malsup.com/form/ for the javascript and using Django on the back end. The form is being submitted and the processing on the back end is going through without a problem, but when a response is received from the server, my Firefox browser prompts me to download/open a file of type "application/json". The file has the json content that I've been trying to send to the browser.

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

I don't believe this is an issue with how I'm sending the json as I have a modularized json_wrapper() function that I'm using in multiple places in this same application.

我不认为这是我如何发送json的问题，因为我有一个模块化的json_wrapper()函数，我在同一个应用程序中的多个地方使用它。

Here is what my form looks after Django templates are applied:

以下是我的表单在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>

You won't see any submit buttons because I'm calling submit with a button else where and am using ajaxSubmit() from the jquery.form.js plugin.

您不会看到任何提交按钮，因为我使用jquery.form中的ajaxSubmit()按钮调用submit。js插件。

Here is the controlling javascript code:

下面是控制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);
}

As you can see, I've gotten desperate to see the success callback function work and simply have an alert message created on success. However, we never reach that call. Also, the error function is not called and the beforeSubmit function is executed.

正如您所看到的，我已经迫不及待地希望看到success回调函数工作，并在success中创建一条警告消息。然而，我们从未接到过这样的电话。另外，不调用错误函数，执行前面的函数。

The file that I get back has the following contents:

我取回的文件有以下内容:

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

I use 'success' here to denote whether or not the server was able to run the post command adequately. If it failed the result would look something like:

我在这里使用“success”来表示服务器是否能够充分运行post命令。如果失败了，结果会是这样的:

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

Your time and help is greatly appreciated. I've spent a few days on this now and would love to move on.

非常感谢您的时间和帮助。我已经在这上面花了几天的时间，我很想继续前进。

4 个解决方案

#1

In case anyone had a similar problem, here's the final javascript I ended up using:

如果有人遇到类似的问题，这里是我最后使用的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();
}

#2

Ok I just spent hours with this same problem going through the js file line by line. It was working one second and then the next it wasnt. My problem was - I had deleted the target div for the results. Once i put that back in, it worked fine.

好吧，我花了几个小时在这个问题上通过js文件逐行处理。它一秒钟还在工作，下一秒就不行了。我的问题是——我删除了结果的目标div。一旦我把它放回去，它就能正常工作了。

#3

Happened to me as well. Problem turned out to be the server wasn't converting the entire object to proper JSON. Changed the return value to only the properties I needed:

我也是。问题是服务器并没有将整个对象转换成合适的JSON。将返回值更改为仅需要的属性:

return Json(new {Id = group.Id, Name = group.Name});

#4

You need to call $('#form-id').ajaxForm(); in the document ready jQuery event so the plugin registers all the event handlers.

您需要调用$('#form-id').ajaxForm();在准备好的jQuery事件中，插件注册所有事件处理程序。

#1