使用ajax将JS中的数据属性ID发送到同一索引页上的PHP?

时间:2018-09-13 08:21:25

标签: javascript php json ajax

我不确定该标题的措辞如何。随时进行编辑。

简介我正在使用JSON和PHP创建datatables.net库服务器端表。除了编辑表单,我基本上已经完成了。

我的第一个问题解决了。我有一个while循环,而不是if语句。

我的第二个问题现在是要在AJAX调用之前传输此Javascript代码:

var edit_id = $('#example').DataTable().row(id).data();
    var edit_id = edit_id[0];

到这里是php:

$edit_id = $_POST['edit_id']; 

它们都在同一页面上,即index.php,所以我认为我不能为此使用ajax。

Index.php

<script type="text/javascript">
  $(document).on('click', '.edit_btn', function() {
    var id = $(this).attr("id").match(/\d+/)[0];
    var edit_id = $('#example').DataTable().row(id).data();
    var edit_id = edit_id[0];  
     $("#form2").show();

    //console.log(edit_id[0]); 
    $.ajax({
      type: 'POST',
      url: 'edit.php',
      data: {
        edit_id: edit_id,
        first_name: $("#edit2").val(),
        last_name: $("#edit3").val(),
        position: $("#edit4").val(),
        updated: $("#edit5").val(),
      },
      success: function(data) {
        alert(data);
        if (data == 'EDIT_OK') {
          alert("success");
        } else {
          //   alert('something wrong');
        }
      }
    })
  });
</script>

<?php 
    $sql="select * from employees WHERE id=$edit_id";
    $run_sql=mysqli_query($conn,$sql);
        while($row=mysqli_fetch_array($run_sql)){
            $per_id=$row[0];
            $per_first=$row[1];
            $per_last=$row[2];
            $per_position=$row[3];
            //$per_date=$row[4];
            $per_updated=$row[5];
           ?>

<form id="form2" class="form-horizontal">
  <label class="col-sm-4 control-label" for="txtid">ID</label>
  <input id="edit1" type="text" class="form-control" name="txtid" value="<?php echo $per_id;?>" readonly>

  <div class="form-group">
    <label class="col-sm-4 control-label" id="edit2" for="txtname">First Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="txtname" name="txtname" value="<?php echo $per_first;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtsalary">Last Name</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit3" name="txtsalary" value="<?php echo $per_last;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtage">Position</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit4" name="txtage" value="<?php echo $per_position;?>">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="txtage">Updated</label>
    <div class="col-sm-6">
      <input type="number" class="form-control" id="edit5" name="txtage" value="<?php echo $per_updated;?>">
    </div>

    <button type="button" class="close" value="Cancel" data-dismiss="modal">&times;</button>
    <button type="button" class="update" value="Update"></button>
</form>

edit.php

$edit_id = $_POST['edit_id']; 
$stmt = $conn->prepare("UPDATE employees SET first_name=?, last_name=?, position=?, updated=? WHERE id=?");
$stmt->bind_param('ssssi', $_POST['first_name'], $_POST['last_name'], $_POST['position'], $_POST['updated'], $_POST['edit_id']);
$confirmUpdate = $stmt->execute();

if($confirmUpdate) {
    echo "EDIT_OK";
   }else {
  trigger_error($conn->error, E_USER_ERROR);
  return;
}
?>

1 个答案:

答案 0 :(得分:0)

我最终想通了:

<script type="text/javascript"> 
        $(document).on('click','.edit_btn',function (){
              var id = $(this).attr("id").match(/\d+/)[0];
                var edit_id = $('#example').DataTable().row( id ).data();
                var edit_id = edit_id[0];
        alert(edit_id);
            $.ajax({
                 url: 'index.php',
              data: { edit_id : edit_id },
                contentType: 'application/json; charset=utf-8',
                success: function(result) {
                      //alert(result);
                }
            });
        });
        </script>