Question

我有这个功能（使我的表单与ajax一起工作）：

$(function() {
   $('#restore_form').ajaxForm({
   beforeSubmit: ShowRequest,
   success: SubmitSuccesful,
   error: AjaxError
   });
});

function ShowRequest(formData, jqForm, options) {
   var queryString = $.param(formData);
   alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
   return true;
}

function AjaxError() {
   alert("An AJAX error occured.");
}

function SubmitSuccesful(responseText, statusText) {
   alert("SuccesMethod:\n\n" + responseText);
}

我的表单（django表单）只包含一个文件上传字段。我也想检查验证，我有这个功能：

function TestFileType( fileName, fileTypes ) {
   if (!fileName) {
      alert("please enter a file");
      return false; 
   }
   dots = fileName.split(".")
   fileType = "." + dots[dots.length-1];
   if(fileTypes.join(".").indexOf(fileType) != -1){
      alert('That file is OK!') ;
      return true;
   }
   else 
   { 
      alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
      return false;
   }
}

现在当我尝试在第一个函数中使用验证函数（TestFileType）时，它不起作用。他们两个分开工作。例如，如果我在提交按钮的onclick上写下面的行，它可以工作：

onclick="TestFileType(this.form.file.value, ['tar.gz']);"

我也希望代替警告用户，在成功函数中显示隐藏的div：我有：

我希望功能成功：

 $('.response').html(responseText);
 $('.response').show();

编辑：这是我的模板：

<form id="restore_form" enctype="multipart/form-data" method="POST" action="restore/">
        {{ form.non_field_errors }}
        {{ form.as_p }}
        {{ form.file.errors }}
        <p id="sendwrapper"><input type="submit" value="{% trans "Send" %}" id="submitButton" style="margin-bottom:10px; cursor:pointer; background-color:#F90;"/></p>            
 </form>
 <div class="response" style="display: none;"></div>

但它不起作用！似乎只有警报在这个功能中起作用。你能帮我么？非常感谢：）

Answer 1

我过去曾试图使用AjaxForm插件，并发现除非你有一个非常具体的理由使用它，否则在没有插件的情况下编写ajax表单提交代码通常会更容易。这是我使用Jquery在没有插件的情况下创建的先前jquery ajaxform的简化/注释版本：

 $('form').submit(function(event) {
    var form = $(this);

    // creates a javascript object of the form data
    // which can be used to validate form data
    var formArray = form.serializeArray();
    // (validate whatever values in formArray you need to check here);

    if (form_is_valid) {
        var formData = form.serialize(); // a URL-encoded version of the form data for the ajax submission
        $.ajax({
            type: "POST",
            url: someUrl,
            data: formData,
            success: function(data) {
                // update success message boxes here
            }
        });
    } else {
        // update client-side validation error message boxes
    }
    event.preventDefault(); // prevent the form from actually navigating to the action page
});

希望这有帮助，我发现该插件有时很有用，但我通常发现这样可以更容易理解代码并避免使用插件。

在ajax形式做验证并显示隐藏的div

1 个答案: