ajax调用仅显示每个循环中第一项的输入值。 需要它显示取决于按钮单击的上下文

Question

我试图基于每个循环中单击按钮的上下文将数据发布到控制器。 该响应仅显示循环的第一次迭代。

@foreach($obj['questions'] as $question)
        <form class="col-md-12" id="upvote">
        <input type="hidden" value="{{$question->id}}" id="question_id" data-id="{{$question->id}}" class="form-control question_id">
        <input type="hidden" value="{{$user->id}}" id="user_id" data-id="{{$user->id}}" class="form-control user_id">
        <button class="btn btn-xs fas fa-arrow-up btn-submit" style="{{ in_array($question->id, $upvotes) ? 'color:gray' : 'color:orange' }}" {{ in_array($question->id, $upvotes) ? 'disabled' : null }}></button>
        </form>
@endforeach

我的ajax脚本如下所示：

<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.btn-submit').click(function(e){
        e.preventDefault(); 
        var question_id = $("input[id=question_id]").val();
        var user_id = $("input[id=user_id]").val();
            $.ajax({
                url: "{{ route('welcome.upvoteAjax') }}",
                type: 'POST',
                data: {question_id:question_id, user_id:user_id},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                }
            });
        });
    });
</script>

我的路线：

Route::post('/upvoteAjax', 'WelcomeController@upvoteAjax')->name('welcome.upvoteAjax');

我的控制器如下所示：

public function upvoteAjax(Request $request){
   if($request->ajax()) {
      return response()->json($request);
   }
}

我在控制台中得到的响应是（我还附加了浏览器的屏幕截图）：

(index):593 {question_id: "736", user_id: "1"}
(index):593 {question_id: "736", user_id: "1"}
(index):593 {question_id: "736", user_id: "1"}

无论我单击循环中的哪个项目，这都是输出。 我想要的输出是问题以及与前端显示的循环迭代关联的用户。 对于任何反馈，我们都表示感谢。

谢谢。

Answer 1

当您单击“提交”按钮时，您将从它发现示例的第一个字段中获取值

<input id="question_id"> 。

解决此问题的更好方法是调用closeset元素输入类型以获取值：

    var question_id = $(this).closest('.question_id').val();

这将确保表单值对应于按钮正在提交的输入。 每个元素的ID也是唯一的。

在这里试试这个：

let btns = document.querySelectorAll('.btn')
btns.forEach((btn) => {
    btn.addEventListener('click', function(event){
        event.preventDefault();
        let question_id =  btn.parentNode.children[0].value
        let user_id = btn.parentNode.children[1].value

        $.ajax({
                url: "{{ route('welcome.upvoteAjax') }}",
                type: 'POST',
                data: {question_id: question_id, user_id: user_id},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                }
        })

    })
  })
}

Answer 2

在参考了Aditya的答案并理解了参考如何工作之后，我进行了更多搜索，现在对我有用

$('.btn-upvote').click(function(e){
   e.preventDefault(); 
   var question_id = $(this).parent().find('.question_id').val();
   var user_id = $(this).parent().find('.user_id').val();
       $.ajax({
           url: "{{ route('welcome.upvoteAjax') }}",
           type: 'POST',
           data: {question_id:question_id, user_id:user_id},
           dataType: 'json',
           success: function (data) {
               console.log(data);
           }
       });
});