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();
}

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...