Question

我正在尝试使用“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, 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"}

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

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

非常感谢您的时间和帮助。我现在已经花了几天时间，并希望继续前进。

Answer 1

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

Answer 2

好的，我只是花了几个小时同时逐行查看js文件的问题。它工作了一秒然后下一个它没有。我的问题是 - 我删除了结果的目标div。一旦我把它放回去，它运作良好。

Answer 3

也发生在我身上。问题原来是服务器没有将整个对象转换为正确的JSON。将返回值更改为仅我需要的属性：

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

Answer 4

您需要在文档就绪的jQuery事件中调用$('#form-id').ajaxForm();，以便插件注册所有事件处理程序。

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

4 个答案: