javascript - 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将监听器附加到点击事件。 ID 始终是唯一值。当多个ID具有相同值时，选择第一个ID，忽略其余ID。

类(class)

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

表格

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

元

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

提交

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

对于这个答案，我将 meta 元素重写为 input，将 input 元素包装在 form 中code> 元素并向 form 元素添加了一个 class 。现在您可以选择所有表单并监听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();
  });

});