javascript - 使用 foreach 通过 Ajax 和动态表单进行发布

Question

我有一个 for every 循环，它输出注释以及与注释共享关系的赞成票/反对票，它工作正常，但我可以动态重新创建很多这些表单，这是我可以使用 ajax 发布的唯一方法一个特定的表单是通过 foreach 循环 Ajax 脚本和表单，这样 ajax 脚本中表单的 id 是唯一的。

我想消除 Ajax 脚本中的臃肿部分，只使用单个请求来发布数据，但我无法弄清楚如何在不使用唯一 ID 的情况下发布特定表单。

@foreach ($getNotesAll as $getnotes)

<p class="notes">{{$getnotes->body}}</p>

<?php $formRand = rand(); ?>

<form class="vote-form" id="upvote-form{{$formRand}}" method="post" 
action="/notes/vote">

<button type="submit" form="upvote-form{{$formRand}}" id="vote-up{{$formRand}}" 
class="vote-btn upvote"></button>

  <input type="hidden" name="type" value="1">
  <input type="hidden" name="voteid" value="{{$_SESSION['user_id']}}">
  <input type="hidden" name="noteUniqueID" value="{{$getnotes->noteUnique}}">
  <input type="hidden" name="noteid" value="{{$getnotes->user_id}}">

  {{csrf_field()}}
  </form>



  <form class="vote-form" id="downvote-form{{$formRand}}" method="post" 
  action="/notes/vote">

  <button type="submit" form="downvote-form{{$formRand}}" id="vote-
  down{{$formRand}}" class="vote-btn"></button> 

  <input type="hidden" name="type" value="0">
  <input type="hidden" name="voteid" value="{{$_SESSION['user_id']}}">
  <input type="hidden" name="noteid" value="{{$getnotes->user_id}}">
  <input type="hidden" name="noteUniqueID" value="{{$getnotes->noteUnique}}">
  {{csrf_field()}}
  </form> 



 <?php

  echo "<script>
   $( '#downvote-form". $formRand . "' ).on( 'submit', function(e) {
    e.preventDefault(); 
     $.ajax({
       type: 'POST',
       url: '/notes/vote',
       data: $(this).serialize(),
       success: function( msg ) {

      }
   });
 });


  $( '#upvote-form".$formRand."' ).on( 'submit', function(e) {
    e.preventDefault(); 
    $.ajax({
       type: 'POST',
       url: '/notes/vote',
       data: $(this).serialize(),
       success: function( msg ) {";

     }
   });
  });";  ?>



 @endforeach

我已经尝试过类似的方法

$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: '/notes/vote',
        data: $(this).serialize(),
        success: function () {
            location.reload();
        }
    });
    e.preventDefault();
  });
 });

但这只是在单击单个按钮时将所有表单发布到页面上，我尝试为表单添加唯一的 onclick 事件，但得到了相同的结果。任何指导将不胜感激

Answer 1

根据您的陈述:- 但这只是在单击单个按钮时发布页面上的所有表单

我假设您只想发送单击提交按钮的表单。因此请执行以下操作:-

1.不要使用 $('form').on('submit', function (e) { 使用 $('.vote-btn').on('click ', 函数 (e) {

2.不要使用$(this).serialize(),，而是使用$(this).parent('form').serialize(),

所以代码需要是:-

$(function () {
    $('.vote-btn').on('click', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '/notes/vote',
            data: $(this).parent('form').serialize(),
            success: function () {
                location.reload();
            }
        });
    });
});