简体   繁体   English

如何使用PHP从MySQL数据库使用AJAX更新数据?

[英]How do I Update Data with AJAX from MySQL Database using PHP?

I have a table with a list of books from MySQL Database, and I'm trying to update it with Ajax and PHP. 我有一张桌子,上面有来自MySQL数据库的书籍列表,我正在尝试使用Ajax和PHP更新它。 Looks like update.php page won't receive the data. 看起来update.php页面无法接收数据。

library.php (the table): 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 (the Ajax): the function here doing a couple of actions: 1. switches the button to the input field. script.js(Ajax):此处的功能可进行以下操作:1.将按钮切换到输入字段。 2. reveals the "save" button that changes the phone number in the table first and then supposed to send data to the update.php page. 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';
 };  }; 

and update.php (updating db): 和update.php(更新db):

    <?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";
}
?>

我认为您可以通过设置请求标头来解决此问题:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM