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，那么您将非常幸运。

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

1 个答案: