對于未來的讀者,這是我的第一個問題并且已經找到答案(閱讀下面的評論和回復):
首先,我在 Stackoverflow 中搜索過,但沒有找到類似問題的答案。
我想將一個 html 按鈕(在許多按鈕中)與一個 JQuery 函式鏈接起來。該函式應像這樣執行 AJAX 方法:
單獨檔案 index.php 中的 HTML 代碼:
<button id="submitbtn" type="button" class="btn btn-success">UPDATE</button>
JQuery 函式:
$('#submitbtn').on('click', function(){
var id = $(this).data('id');
$.ajax({
url: 'includes/updatequery.php',
type: 'POST',
data: {id:id},
success: function(data){
if (data) {
console.log("updated");
} else {
$('#error').load("custom/static/error.html");
}
},
error: function(jqXHR, textStatus, errorThrown){
$('#error').html("oops" errorThrown);
}
});
});
這是應該由 AJAX 方法呼叫的 PHP 檔案:
<?php
include("src/db.php");
$query = "UPDATE mytable SET job='completed' WHERE id=id";
mysqli_query($conn, $query);
?>
問題是我無法將單擊的按鈕的 ID(因為有很多按鈕)鏈接到資料庫條目的 ID,以便根據此特定按鈕更新資料庫中的資料。
現在我想在更新資料庫后實時更新結果。
這是輸出選單項(與之前存盤在同一個資料庫表中的項)的 PHP 代碼,并且在每個選單項的前面應該顯示一個標記(其中包含一個值:“已完成”或“未完成”):
<?php
foreach($data as $d) {
$id = $d['id'];
$mystatus = $d['status'];
?>
<li class="nav-item">
<a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
<i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
<p><?php
echo $d["title"];
if ($d['type'] == "job") { ?>
<span id="updatedicon" class="right badge <?php if($mystatus == "completed"){echo "badge-success";} else {echo "badge-danger";}?>"><?php setJob($con, $id)?></span><?php
} ?>
</p>
</a>
</li><?php
}
?>
這是定義 setJob 方法的 PHP 檔案:
<?php
function setJob($con, $idd) {
$sql = "SELECT status FROM mytable WHERE id=$id";
$result = mysqli_query($con, $sql);
while ($row = mysqli_fetch_assoc($result)) {
foreach ($row as $row => $value) {
echo $value;
}
}
}
?>
有什么建議?
謝謝
uj5u.com熱心網友回復:
使用data-id屬性添加id:
<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>
https://www.w3schools.com/tags/att_global_data.asp
默認情況下,jQuery的AJAX技術的用途Content-Type的application/x-www-form-urlencoded; charset=UTF-8。這意味著在 PHP 中可以使用$_POST訪問 POST 值。如果使用Content-Typeof application/json,則需要執行此操作。
include("src/db.php");
$id = $_POST['id']; // make sure to sanitize this value
$query = "UPDATE mytable SET job='completed' WHERE id=$id";
mysqli_query($conn, $query);
上面的示例僅演示了如何id從 POST 中參考該值。然而,這并不安全。確保清理該值并使用準備好的陳述句保護自己免受SQL 注入。準備好的陳述句允許您將變數系結到單獨發送到資料庫服務器的 SQL 查詢,并且不會干擾查詢本身。
uj5u.com熱心網友回復:
更新的 HTML - 將 data-id="" 添加到按鈕并替換為 id
<button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>
更新 jQuery - 使用 attr 通過使用 data-id 屬性獲取行/記錄的 id
$('#submitbtn').on('click', function(){
var id = $(this).attr('data-id');
$.ajax({
url: 'includes/updatequery.php',
type: 'POST',
data: {id:id},
success: function(data){
if (data) {
console.log("updated");
} else {
$('#error').load("custom/static/error.html");
}
},
error: function(jqXHR, textStatus, errorThrown){
$('#error').html("oops" errorThrown);
}
});
});
uj5u.com熱心網友回復:
我已經成功地通過使用全域選擇器設定 id 變數來鏈接每個資料庫條目的 ID $_POST['id],完全按照建議。
現在我想讓結果在 DOM 中實時更新。資料庫中的資料已更新,但 DOM 未相應更新。
我知道PHP和Javascript是在不同的環境下執行的,沒有辦法用Javascript控制Data來操作DOM,因為在服務器端執行PHP腳本后,Data已經發送回Client瀏覽器了。我將更新我的原始問題,以便您可以更清楚地了解問題。謝謝你們!!
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/367743.html
標籤:javascript html 查询 mysql 阿贾克斯
