php - 如何使用 PHP 从 MySQL 数据库中使用 AJAX 更新数据?
问题描述
我有一张表,其中包含 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";
}
?>
解决方案
我认为您可以通过设置请求标头来解决问题:
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
推荐阅读
- javascript - 使用 nodejs 服务器和 Pug 如何一次显示列表中的元素并使用按钮进行迭代?
- reactjs - React 应用程序无法在 IE 11 浏览器中运行
- angular - 防止点击另一个按钮,直到它停止
- binary - 如何使用差异和补丁来比较两个 pcap 文件?
- python - 在熊猫 to_datetime 函数中处理时区
- c# - 无法从 Nuget 包管理器安装 Microsoft.EntityFrameworkCore
- javascript - HTML如何防止在画布元素上拖动时意外选择页面?
- angular - 致命错误:接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足 #34576
- python-3.x - 如何通过蓝牙在 Raspberry Pi 4 和 Arduino Nano BLE 之间进行读写?
- c - 我们可以访问已释放的内存吗?