爲什麼當我使用AJAX時，這個PHP重新加載？

Question

我有一個PHP頁面（的index.php）具有兩個jQuery的滑塊，在該提交這些值到另一個PHP頁面（seatmap.php）2輸入文本框顯示值包括在的index.php 。但是，當我點擊提交按鈕與使用AJAX onclick事件時，頁面重新加載/刷新時，事實上，我用AJAX的。我覺得ajax函數根本沒有被使用。有人可以幫幫我嗎？任何想法如何使其工作？任何形式的幫助表示讚賞。先謝謝你。

這裏是的index.php代碼：

<form method="POST" action="index.php"> 

<p class="submitSlider"> 
    <input type="SUBMIT" name="submit" value="Submit" onclick="showAvailable()"> 
</p> 

<div id="slider1Containter"> 

    <p> 
     Time Range: <span class="slider-time">10:00 AM</span> 
    </p> 

    <input type="number" id="startShift" name="startShiftSlider"> 

    <div id="slider"></div> 

</div> 

<div id="slider2Containter"> 

    <p> 
     Time Range: <span class="slider-time2">10:00 AM</span> 
    </p> 

    <input type="number" id="endShift" name="endShiftSlider"> 

    <div id="slider2"></div> 

</div> 

</form> 

而對於seatmap.php代碼：

<?php 
if ($_SERVER['REQUEST_METHOD'] == 'POST'){ 
session_start(); 

$startShift = $_POST['startShiftSlider']; 
$endShift = $_POST['endShiftSlider']; 

$_SESSION['startShiftValue'] = $startShift; 
$_SESSION['endShiftValue'] = $endShift; 

$finalStartShiftValue = $_SESSION['startShiftValue']; 
$finalEndShiftValue = $_SESSION['endShiftValue']; 

echo $finalStartShiftValue; 
echo $finalEndShiftValue; 
} 
?> 

而對於functions.js頁：

function showAvailable(){ 
    var xmlhttp; 

    var getStartShift; 
    var getEndShift; 

    if(window.XMLHttpRequest){ 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else{ 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     getStartShift = document.getElementById("startShift").value; 
     getEndShift = document.getElementById("endShift").value; 

     xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true); 
     xmlhttp.send(); 
     } 
    } 
} 

這可能是另一個問題的可能重複。

Answer 1

提交按鈕的默認行爲仍然被執行時，它被點擊（提交頁面又名'刷新'）。您需要禁用默認行爲。

<input type="SUBMIT" name="submit" value="Submit" onclick="showAvailable(); return false;"> 

編輯：回答您的評論：

xmlhttp.onreadystatechange=function(){ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    alert(myRequest.responseText); 
    } 
} 

getStartShift = document.getElementById("startShift").value; 
getEndShift = document.getElementById("endShift").value; 
xmlhttp.open("GET","seatmap.phpsendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true); 
xmlhttp.send(); 

Answer 2

您需要添加虛假回報您的showAvailable功能和更新的onclick到的onsubmit。

HTML：

<input type="SUBMIT" name="submit" value="Submit" onsubmit="return showAvailable();"> 

JS代碼：

function showAvailable(){ 
    var xmlhttp; 

    var getStartShift; 
    var getEndShift; 

    if(window.XMLHttpRequest){ 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else{ 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     getStartShift = document.getElementById("startShift").value; 
     getEndShift = document.getElementById("endShift").value; 

     xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true); 
     xmlhttp.send(); 
     } 
    } 
return false; 
}