在表行上編輯數據並使用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按鈕上單擊了此模式

    <!-- 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代碼以獲得更好的幫助。