即使應用AJAX後，頁面也會重新加載

Question

我正試圖刪除一行數據庫。記錄正在刪除，但問題是頁面正在重新加載。至於，我使用AJAX，頁面不應該刷新。 這裏是js函數：

function delThis(id) 
{ 
var deleteRow = id; 
var page = "stu_rec1.php"; 
var parameters ='deleteRow='+deleteRow; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
     alert("Form sent successfully"); 
}; 
xmlhttp.open("POST",page,true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send(parameters); 
} 

以下是HTML代碼：

<?php for($i=0;$i<count($id);$i++){?> 
<tr> 
    <td><?php echo $name[$i];?></td> 
    <td><?php echo $email[$i];?></td> 
    <td><?php echo $mobno[$i];?></td> 
    <td><?php echo $gender[$i];?></td> 
    <td><?php echo $address[$i];?></td> 
    <td><input type="submit" name="delete" value="Delete" id="delete" onclick="delThis(<?php echo $id[$i];?>);" ></td> 
</tr> 
<?php }?> 

這是正在執行刪除代碼：

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$db="myDB"; 
$delete = $_POST["deleteRow"]; 
$conn = new mysqli($servername, $username, $password,$db); 

if ($conn->connect_error) { 
    die("Connection failed: ".mysqli_connect_error()); 
} 
$sql = "SELECT name, email, mobileno,gender,address FROM studentrecords"; 
$result = mysqli_query($conn, $sql); 
$count=mysqli_num_rows($result); 

if($delete !="") 
{ 
$query= "DELETE FROM studentrecords WHERE id='$delete'"; 
$result1 = mysqli_query($conn, $query); 
} 

mysqli_close($conn); 
?> 

Answer 1

請更改類型=「提交「to type =」button「

<?php for($i=0;$i<count($id);$i++){?> 
<tr> 
<td><?php echo $name[$i];?></td> 
<td><?php echo $email[$i];?></td> 
<td><?php echo $mobno[$i];?></td> 
<td><?php echo $gender[$i];?></td> 
<td><?php echo $address[$i];?></td> 
<td><input type="button" name="delete" value="Delete" id="delete" onclick="delThis(<?php echo $id[$i];?>);" ></td> 
</tr> 
<?php }?> 
function delThis(id) 
{ 
var deleteRow = id; 
var page = "stu_rec1.php"; 
var parameters ='deleteRow='+deleteRow; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
    alert("Form sent successfully"); 
    //add here your callback row remove code 
}; 
xmlhttp.open("POST",page,true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send(parameters); 
}