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);
           }
       });
});