php - 如何使用 PHP 通过 AJAX 从 MySQL 数据库更新数据？

Question

我有一个表，其中包含 MySQL 数据库中的书籍列表，我正在尝试使用 Ajax 和 PHP 更新它。看起来 update.php 页面不会收到数据。

library.php(表):

<?php include "includes/header.php"; ?>
<?php include "functions.php"; ?>
<?php include "update.php"?>
<?php
connection();
$query = "SELECT * FROM books";
$result = mysqli_query($connection , $query);
?>


    <div class="container"> 
       <h1 class="display-4">Welcome to Social Library:</h1>
        <?php
         // num_rows - checkes how many rows are returned from the query
            if ($result -> num_rows > 0){
                echo "<table id ='table' class='table'><tr><th> ID No </th><th> Book title </th><th> Author </th><th> Genre </th><th>Language </th><th> Phone </th><th>Change Phone No</th></tr>";


                    while($row = mysqli_fetch_assoc($result)){
                        $uniqueId = $row['id'];
                        echo "<tr><td>" 
                            .$row['id']. "</td><td>"
                            .$row['title']. "</td><td>"
                            .$row['author']. "</td><td>"
                            .$row['genre']. "</td><td>"
                            .$row['language']. "</td><td id='phone$uniqueId'>"
                            .$row['phone'] . "</td><td>
                            <input id=$uniqueId type='button' value='Update' onclick='updatePhone(this.id)'></td>
                            </tr>";
               }
               echo "</table>";
                $rowCnt = mysqli_num_rows($result);
                echo "<p id='total'> total books: " . $rowCnt . "</p>";

            }
        ?> 
        <input id='savePhone' style='display:none; position:fixed' type='button' value='save' name='update'>
        <?php echo $rowLength ?> 
    </div>  
<?php include "includes/footer.php" ?>

script.js(Ajax):这里的函数执行几个操作:1. 将按钮切换到输入字段。2. 显示“保存”按钮，该按钮首先更改表中的电话号码，然后将数据发送到 update.php 页面。

function updatePhone(clicked_id){

 var phone = document.getElementById(clicked_id);
 phone.setAttribute('type','text');
 phone.value = "";

 var show = document.getElementById('savePhone');
 show.style.display = "inline";

 show.onclick = function(){
     var oldPhone = "phone"+clicked_id;
     var newPhone = document.getElementById(clicked_id).value;

     document.getElementById(oldPhone).innerHTML = newPhone;

    function checkIfReady(){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            } else {
                alert("Yor browser does not support this service");
            }
            xmlhttp.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200){
                    document.getElementById(clicked_id).innerHTML = this.responseText;

                }
            }
        };
     checkIfReady();

     var currentPhone = document.getElementById(oldPhone).innerHTML;
     var data = clicked_id + '|' + currentPhone + '|';

     console.log(clicked_id);
     xmlhttp.open("POST","update.php",true);
     xmlhttp.send("data="+data); 


     phone.setAttribute('type','button');
     phone.value = "Update";
     show.style.display = 'none';
 };  }; 

和update.php(更新数据库):

    <?php 
$myData = $_POST['data'];
list($id , $phone) = explode('|', $myData);

$connection = mysqli_connect('localhost' , 'root', 'root', 'edwin_diz');

$query = "UPDATE books SET phone = '$phone' WHERE id = '$id' ";
$result = mysqli_query($connection, $query);

if($result){
    echo "Your phone is updated";
}
?>

Answer 1

我认为您可以通过设置请求 header 来解决该问题:

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");