通过 AJAX 发送表单，HTML 节点选择用于数据发送

sending form via ajax, html node select for data sending

本文关键字：选择 用于 数据 节点 AJAX 表单 通过 HTML      更新时间：2023-09-26

使用此代码

<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>

从这里定位多个表单以通过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

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

你不能像

使用 ajax 那样轻松地提交文件，就像只提交文本一样容易。

您必须使用 XHR。

这是一个解决方案：如何异步上传文件？

请注意，如果您需要支持IE8/9，那么您几乎不走运。

相关文章：