javascript - 通过ajax发送表单，html节点选择数据发送

Question

使用此代码

<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this).parent().serialize(), // changed
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
    return false; // avoid to execute the actual submit of the form.
});
</script>

从这里开始Targeting multiple forms to send via ajax (jquery)

用户可以发送特定形式的数据。

在这个例子中结构是这样的

<form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
 </form>

就我而言，我的 Html 结构有点复杂。

<form id="w0" action="/users/new_article" method="post" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="yeUp">    <div class="form-group field-uploadform-file">
<label class="control-label" for="uploadform-file">File</label>
<input type="hidden" name="UploadForm[file]" value=""><input type="file" id="uploadform-file" name="UploadForm[file]">

<div class="help-block"></div>
</div>

 <!--   <div class="file-input btn btn-block btn-primary"> -->
    <div class="file-input btn btn-block btn-primary">
        + add files
        <input type="file" name="files" id="image_upload">
    </div>
    </form>

我正在监视#image_upload 的变化。 但它不是表单标记的子级，因此我无法使用第一个示例中的代码

data: $(this).parent().serialize(), // changed

所以我的问题是我必须如何编写代码才能提交表单？

Answer 1

您无法像使用 ajax 那样提交文件，就像仅提交文本一样简单。

您必须使用 XHR。

解决方案如下:How can I upload files asynchronously?

请注意，如果您需要支持 IE8/9，那您就不太走运了。