我有一個帶有名為“data-id”的資料屬性的按鈕，它的值為“1”。1 是我資料庫中汽車的 ID 號。
<div class="row">
<button type="button" class="btn" data-id="1">View Car Details</button>
</div>
當它被點擊時，我想把這個 id 傳遞給我的 JavaScript，它會使用 XMLHttpRequest 將這個 id 發送到我的 PhP。這就是我對 JavaScript 的看法
<script>
const buttons = document.querySelectorAll("[data-id]");
buttons.forEach(button => {
button.addEventListener("click", (loadCarDetails));
});
document.getElementById('car-details').addEventListener('click', loadCarDetails);
function loadCarDetails() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'getCarDetails.php', true);
xhr.onload = function () {
if (this.status == 200) {
let carDetails = JSON.parse(this.responseText);
console.log(cars);
//document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>
我需要以某種方式獲取 id 并將其傳遞給 getCarDetails.php，它將使用 jSON 回傳汽車的詳細資訊。我需要使用 id 在 getCarDetails.php 中執行查詢。這是我的PHP。
$connection = new mysqli("sever", "username", "password", "database");
$car_id = $_POST['car_id];
if ($connection->connect_error){
exit("Error connecting to the database");
}
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$connection->set_charset("utf8mb4");
$car_id = $connection->escape_string($_POST['car_id']);
$stmt = $connection->prepare("SELECT car_drivetrain_lookup.drivetrain_type, car_suitability_lookup.car_suitability_type
FROM cars
INNER JOIN car_suitability_lookup ON car_suitability_lookup.lookup_id = cars.car_suitability_id
INNER JOIN car_drivetrain_lookup ON car_drivetrain_lookup.lookup_id = cars.car_drivetrain_id
WHERE cars.car_id = ?");
$stmt->bind_param("i", $car_id);
$stmt->execute();
$result = $stmt->get_result();
echo json_encode($result->fetch_all());
有人可以幫助我實作這一目標嗎？我對 JavaScript 真的很陌生，希望能指出正確的方向。
uj5u.com熱心網友回復：
這有兩個方面：
- 獲取
id從點擊的元素，和 - 向服務器發送正確型別的請求
第一部分很簡單。loadCarDetails呼叫您的函式時，將事件物件作為第一個引數，該物件有一個currentTarget屬性，指的是您將函式連接到的元素，因此我們可以從中獲取data-*屬性：
function loadCarDetails(event) {
const id = event.currentTarget.getAttribute("data-id");
// ...
}
然后，我們需要做POST（當前的代碼做了GET代替）與id作為car_id。我不會XMLHttpRequest在新代碼中使用，它已經過時了；我會用fetch：
function loadCarDetails(event) {
const id = event.currentTarget.getAttribute("data-id");
const body = new FormData();
body.append("car_id", id);
fetch("getCarDetails.php", {
method: "POST",
body
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
})
.then(carDetails => {
// ...use the car details here...
})
.catch(error => {
// ...handle/reject error here...
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359552.html
標籤：javascript dom
上一篇：如何在div框中顯示來自javascriptinnerhtml的文本輸出，而不會出現文本溢位和html/css樣式