AJAX 仅发布第一个表单

Question

在我的网站上，我希望有多种表格来对不同的帖子进行投票。我已经为此实现了 AJAX，它工作正常，但总是只使用第一种形式。我知道我应该在我的代码中改变一些东西来做到这一点（一些带有 id 的东西），但老实说，我迷路了。请多多指教。

$(document).ready(function() {
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  $("#negative_button").click(function() {
    $.ajax({
      /* the route pointing to the post function */
      url: '/negative',
      type: 'POST',
      /* send the csrf-token and the input to the controller */
      data: {
        _token: CSRF_TOKEN,
        negative_vote: $("#negative_vote").val(),
        post_id: $("#post_id").val()
      },
      dataType: 'JSON',
      /* remind that 'data' is the response of the AjaxController */
      success: function(data) {
        $(".writeinfo").append(data.alert);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-right inline">
  <meta name="csrf-token" content="{{ csrf_token() }}" />
  <input type="hidden" id="negative_vote" name="negative_vote" value="{{Auth::user()->id}}">
  <input type="hidden" id="post_id" name="post_id" value="{{$post->id}}">
  <input type="button" id="negative_button" class="btn btn-danger" value="Downvote">
</div>

<div class="writeinfo"></div>

Answer 1

只有 一个 按钮起作用的原因是您使用 ids 将侦听器附加到 click 事件。 ID 始终是一个唯一值。当有多个 ID 具有相同值时，选择第一个 ID，忽略其余 ID。

类

改为使用class 来标识按钮或表单。页面上可以有无限数量的具有相同类的元素。

表格

您正在尝试同时发送多个值。您可以选择每个单独的input 元素并获取它们的值，或者将所有input 字段包装在form 元素中。此表单元素可以识别其中的input 元素并访问它们的值。它可以更轻松地一次发送表单中的所有值。

元

将meta 元素重写为隐藏的input 元素。 meta 元素属于文档的 head，用于向浏览器提供有关它正在查看的页面的信息。

提交

form 可以提交，这意味着它会将其中的数据发送到您设置的目的地。将 input type="button" 更改为 input type="submit" 以便稍后在 JS 中使用此功能。

对于这个答案，我将meta 元素重写为input，将input 元素包装在form 元素中，并将class 添加到form 元素中。现在您可以选择所有表单并监听submit 事件。

<div class="pull-right inline">
  <form class="js-downvote-form" action="/" method="GET">
    <input type="hidden" name="csrf-token" value="{{ csrf_token() }}"/>
    <input type="hidden" name="negative_vote" value="{{ Auth::user()->id }}">
    <input type="hidden" name="post_id" value="{{ $post->id }}">
    <input type="submit" class="btn btn-danger" value="Downvote">
  </form>
</div>

<div class="writeinfo"></div>

我们可以从form 元素中选择所有输入，而不是选择每个单独的输入。使用 jQuery .serialize() 方法，您可以从表单中提取所有值并将其存储在一个对象中以发送到 body 属性中。

$(document).ready(function(){

  // Listen to submit instead of click on all forms.
  $(".js-downvote-form").on("submit", function(event){

    // Get the values from this form and store it in an object.
    var formData = $(this).serialize();

    $.ajax({
      /* the route pointing to the post function */
      url: '/negative',
      type: 'POST',
      /* send the csrf-token and the input to the controller */
      data: formData, // Your data to send.
      dataType: 'JSON',
      /* remind that 'data' is the response of the AjaxController */
      success: function (data) { 
        $(".writeinfo").append(data.alert); 
      }
    });

    // This is important.
    // We want to override the default submit behavior.
    // So preventing it is necessary.
    event.preventDefault();
  });

});