javascript - 使用ajax编辑表行数据并保存在数据库中

Question

我不太擅长(一点也不)使用ajax/js，这里需要一点帮助。

我在页面上有一个表格，显示如下数据:

    <table class="table table-bordered">
        <thead>
            <tr>
            <th>People</th>
            <th>Rate per person</th>
            <th width="200px">Action</th>
            </tr>
        </thead>
        <tbody>
            <?php 
        $result_rates = $conn->query("SELECT * FROM rates Where user_id = 60");
        if($result_rates->num_rows>0){
            while ($row=$result_rates->fetch_all(MYSQLI_ASSOC)) {
                foreach ($row as $r){

                }
            }
        }
        ?> 
        <tr>
           <td>1</td>

           <td >$ <?php if($r['rate_one'] > 0){echo $r['rate_one'];}else{echo '0';} ?></td>
           <td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>

        </tr>
           <tr>
               <td>2</td>
               <td>$ <?php if($r['rate_two'] > 0){echo $r['rate_two'];}else{echo '0';} ?></td>
               <td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
           </tr>

我在编辑按钮单击上也有这个模式

    <!-- Edit Item Modal -->
    <div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Item</h4>
          </div>

          <div class="modal-body">
                <form  action="includes/update.php" method="put">
                    <input type="hidden" name="<?php echo $r['rate_id']; ?>" class="edit-id">

                    <div class="form-group">
                        <label class="control-label" for="title">People:</label>
                        <input type="text" name="rate_one" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="title">Prise:</label>
                        <input type="text" name="rate_two" class="form-control" />
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
                    </div>

                </form>

          </div>
        </div>
      </div>
    </div>

因此，当我单击“编辑”按钮时，模式将打开并加载数据。如果我更改一些数据并单击Submit，我会收到成功消息，但数据库中的数据未更改。

这是ajax部分

/* Edit Item */
$("body").on("click",".edit-item",function(){

    var id = $(this).parent("td").data('id');
    var rate_one = $(this).parent("td").prev("td").prev("td").text();
    var rate_two = $(this).parent("td").prev("td").text();

    $("#edit-item").find("input[name='rate_one']").val(rate_one);
    $("#edit-item").find("input[name='rate_two']").val(rate_two);
    $("#edit-item").find(".edit-id").val(id);

});

/* Updated new Item */
$(".crud-submit-edit").click(function(e){

    e.preventDefault();
    var form_action = $("#edit-item").find("form").attr("action");
    var rate_one = $("#edit-item").find("input[name='rate_one']").val();

    var rate_two = $("#edit-item").find("input[name='rate_two']").val();
    var rate_id = $("#edit-item").find(".edit-id").val();

        $.ajax({
            dataType: 'json',
            type:'POST',
            url: form_action,
            data:{rate_one:rate_one, rate_two:rate_two,rate_id:rate_id}
        }).done(function(data){
            getPageData();
            $(".modal").modal('hide');
            toastr.success('Rate Updated Successfully.', 'Success Alert', {timeOut: 5000});
        });  
});

当我查看开发控制台时，我发现 rate_id 也没有通过。有人可以帮忙吗？

  $id  = $_POST["rate_id"];
  $post = $_POST;

  $sql = "UPDATE rates SET rate_one = '".$post['rate_one']."'
    ,rate_two = '".$post['rate_two']."' 
    WHERE rate_id = '".$id."'";

它用于测试目的，这就是为什么它不包含准备好的语句

Answer 1

在表单数据中，您没有在值中设置费率 ID。请进行以下更改。

<input type="hidden" name="edit-id" class="edit-id" value=<?php echo $r['rate_id']; ?>>

还请分享 update.php 的 php 代码以获得更好的帮助。