我的異步獲取函式嵌入在 names.php 中，當我激活該函式時，它會將我帶到它發布到的端點：change-name.php。我想保留在 names.php 頁面上，但在 fetch 函式運行后重繪 該頁面。
我單擊下面的跨度打開一個文本欄位，在其中添加一個名稱并單擊按鈕：
<span onclick="addGuestName(this)">
<button class="addPaxName btn btn-xs btn-warning">ADD</button>
這作業得很好。并更新名稱，但單擊 ADD 按鈕后我被傳送到 /change-name.php 頁面。
我想要的回應是在獲取功能完成后保留在原始頁面上并重繪 頁面。我如何得到這個結果。
async function updateGuestName(paxid,name){
paxIDbody = '{"pxid": "' paxid '", "name": "' name '"}';
console.log("PaxID:", paxIDbody);
try {
const settings = {
method: "POST",
headers: {
"Content-type": "application/json; charset=UTF-8"
},
body: paxIDbody,
};
const response = await fetch(
"/change-name.php",
settings
);
const data = await response.json();
console.log("DATA: ",data);
} catch (error) {
console.log("ERROR: ",error);
}
}
function addGuestName(obj) {
const itemClicked = obj;
const paxid = obj.id;
const addPaxName = itemClicked.nextElementSibling;
const addPaxNameButton = itemClicked.nextElementSibling;
addPaxNameButton.style.display = 'inline-block';
var addPaxNameField = document.createElement('input');
addPaxNameField.setAttribute('type', 'text');
addPaxNameField.setAttribute('name', 'visitorNameSurname[]');
addPaxNameField.setAttribute('placeholder', 'Enter Name & Surname');
itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);
addPaxNameField.setAttribute("required", "required");
addPaxNameButton.addEventListener('click', () => {
const name = addPaxNameField.value;
updateGuestName(paxid,name);
})
}
我的 PHP 端點在資料庫更新后回傳 JSON：
header('Content-type:application/json;charset=utf-8');
$myObj=new \stdClass();
$myObj->status = $status;
$myObj->message = $message;
$myJSON = json_encode($myObj);
echo $myJSON;
uj5u.com熱心網友回復：
默認按鈕型別是提交。將onsubmit與event.preventDefault()內部onsubmit回呼一起使用。如果不需要瀏覽器的表單驗證，可以使用更直接的type="button". 要重繪 頁面，請查看 location.reload()。
uj5u.com熱心網友回復：
addPaxNameButton.addEventListener('click', (e) => {
e.preventDefault();
const name = addPaxNameField.value;
updateGuestName(paxid,name);
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360497.html
標籤：javascript php 异步等待
上一篇：組件內的函式拋出錯誤訊息