如何为表格中的多个按钮设置AJAX调用

Question

我有一个表，如果满足条件，并且希望条件为假，那么我希望用户在输入字段中填写数据，然后禁用输入字段。我在每行中都有一个带有Submit属性的输入标签。我将onClick（）提交给下面的ajax函数。这里的错误是，只有第一个提交按预期工作，其余所有按钮均不工作。谁能帮我吗？    <table>      <?php for($i=0; $i < $count; $i++){ ?>       <tr>        <td><?php echo $student_name[$i]; ?>        <input type='hidden' id='student_id' value='<?php echo $student_id[$i]; ?>'>        <input type='hidden' id='class_id' value='<?php echo $class_id; ?>'>        <input type='hidden' id='phase' value='<?php echo $phase; ?>'>        </td>        <td>          <?php if($studnet_p1_a1[$i] != 0){ ?>            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>          <?php }else{ ?>            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" placeholder='08.01' >          <?php } ?>        </td>        <td>          <?php if($studnet_p1_a2[$i] != 0){ ?>            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>          <?php }else{ ?>            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" placeholder='11' >          <?php } ?>        </td>        <td><input type="submit" name="submit" onclick="ajax($(this));return false;" id="<?php echo $i?>" style="width:70px" class="button form-control mb" class="btn btn-success" value="Submit"></td>      </tr>     <?php endfor; ?>    </table>    <script>    function ajax($this) {      var a1 = $("input#a1").val();      var a2 = $("input#a2").val();      var student_id = $("input#student_id").val();      var class_id = $("input#class_id").val();      var phase = $("input#phase").val();      var datastring = 'a1=' + a1 + '&a2=' + a2 + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

Answer 1

请检查以下代码并尝试：

<table> 

     <?php for($i=0; $i < $count; $i++){ ?>

       <tr>

        <td><?php echo $student_name[$i]; ?>

        <input type='hidden' class='student_id' value='<?php echo $student_id[$i]; ?>'>

        <input type='hidden' class='class_id' value='<?php echo $class_id; ?>'>

        <input type='hidden' class='phase' value='<?php echo $phase; ?>'>

        </td>

        <td>

          <?php if($studnet_p1_a1[$i] != 0){ ?>

            <input type="text" style="width:70px" name='a1' class="form-control mb a1" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>

          <?php }else{ ?>

            <input type="text" style="width:70px" name='a1' class="form-control mb a1" placeholder='08.01' >

          <?php } ?>

        </td>

        <td>

          <?php if($studnet_p1_a2[$i] != 0){ ?>

            <input type="text" style="width:70px" name='a2' class="form-control mb a2" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>

          <?php }else{ ?>

            <input type="text" style="width:70px" name='a2' class="form-control mb a2" placeholder='11' >

          <?php } ?>

        </td>

        <td><input type="submit" name="submit" style="width:70px" class="button form-control mb submit_btn" class="btn btn-success" value="Submit"></td>

      </tr>

     <?php endfor; ?>

    </table>

    <script>

        $(document).ready(function () {

            $('body').on('click', '.submit_btn', function(e){

                var a1 = $(this).closest('tr').find('.a1').val();

                var a2 = $(this).closest('tr').find('.a2').val();

                var a3 = $(this).closest('tr').find('.a3').val();

                var a4 = $(this).closest('tr').find('.a4').val();

                var a5 = $(this).closest('tr').find('.a5').val();

                var bmi = $(this).closest('tr').find('.student_id').val();

                var student_id = $(this).closest('tr').find('.student_id').val();

                var class_id = $(this).closest('tr').find('.class_id').val();

                var phase = $(this).closest('tr').find('.phase').val();

                var datastring = 'a1=' + a1 + '&a2=' + a2 + '&a3=' + a3 + '&a4=' + a4 + '&a5=' + a5 + '&bmi=' + bmi + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

                $.ajax({

                    type: "POST",

                    url: "score_process.php",

                    data: datastring,

                    success: function(){              

                    }

                });

            });

        });

     </script>

Answer 2

您没有使用<form>，请尝试使用onclick属性（不带return语句）将更<input>改为<button>，然后删除type="submit"。

$studnet_p1_a2[$i]应该student代替studnet？

还可以考虑使用Angular，React，Vue.js之类的框架。他们比裸php更可扩展。