[英]How to use AJAX to create/update radio buttons?
我目前有一個設置,我使用PHP腳本通過從我的數據庫加載所需的信息來創建單選按鈕列表。 此腳本位於HTML結構中,而不是單獨的文件,因此需要頁面刷新才能更新列表。
我想知道如何在按下按鈕時刪除並重新加載列表,其ID是'btnDelete'(數據庫中項目的實際刪除是一個單獨的點,我不會在這里討論)。 我當前的代碼將刪除單選按鈕列表,但是當添加下一行時,沒有任何反應(包括列表刪除)。
PHP(delCom.php)
<?php
include_once('includes/conn.inc.php');
$query = ("SELECT comicID, comicName FROM comic WHERE username = '".$_SESSION['username']."'");
$result = mysqli_query($conn, $query);
while ($row = $result->fetch_assoc())
{
echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']." </option>";
}
?>
JavaScript的
function delComic()
{
var ajaxRequest;
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
$("#loadList").remove();
document.getElementById("divComics").innerHTML=xmlhttp.responseText;
}
}
ajaxRequest.open("GET", "delCom.php?t=", true);
ajaxRequest.send(null);
}
HTML
<div id="divComics">
<p><u>Uploaded Comics</u></p>
<!-- find comics in database -->
<div id="loadList">
<?php
include_once('includes/conn.inc.php');
$query = ("SELECT comicID, comicName FROM comic WHERE username = '".$_SESSION['username']."' ORDER BY comicName ASC");
$result = mysqli_query($conn, $query);
while ($row = $result->fetch_assoc())
{
echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']." </option>";
}
?>
</div>
<br>
<br>
<input type="button" onclick="delComic()" value="Delete Comic" name="deleteButton" id="btnDelete"/>
</div>
代碼在HTML中運行時正確創建按鈕,但在單獨的php文件中則不行。
提前致謝。
編輯:更新以修復一些錯誤名稱的東西,並添加建議的新行。 loadList現在清空但不會刪除它本身。 目前的問題是PHP文件不會再次輸出按鈕。
沒有帶id=comicList
元素,你不能刪除它$("#comicList").remove();
在Javascript中,因為它不存在。 Javascript可能在此時停止執行,因此不會顯示PHP的結果。
<?php
$username = $_GET['username'];
include_once('includes/conn.inc.php');
$query = ("SELECT comicID, comicName FROM comic WHERE username = '$username'");
$result = mysqli_query($conn, $query);
while ($row = $result->fetch_assoc())
{
echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']." </option>";
}
?>
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
document.getElementById('loadList').innerHTML="";
document.getElementById("divComics").innerHTML=xmlhttp.responseText;
}
}
ajaxRequest.open("GET", "delCom.php?username=MY_EXACT_NAME_I_KNOW_WORKS_HERE", true);
ajaxRequest.send(null);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.