AJAX를 사용할 때 왜이 PHP가 다시로드됩니까?

Question

는 I 다른 PHP 페이지 (seatmap.php)에 그 값을 제출 2 텍스트 입력 상자의 값을 표시 두 jQuery를 슬라이더와 PHP 페이지 (index.php를)를 가지고 의 index.php 포함 . 하지만 AJAX를 사용하여 onclick 이벤트로 Submit 버튼을 클릭하면 실제로 AJAX를 사용할 때 페이지가 새로 고침/새로 고침됩니다. 나는 아약스 함수가 ​​전혀 사용되지 않는 것처럼 느낀다. 누군가 나를 도울 수 있습니까? 어떻게 작동하게하는지에 대한 아이디어가 있습니까? 모든 종류의 도움을 주시면 감사하겠습니다. 미리 감사드립니다.

<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에 대한 : 여기

는 index.php를 코드

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;"> 

편집 : 당신은 당신의 showAvailable 기능에 거짓 수익을 추가하고 onsubmit하는 온 클릭을 업데이트해야

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

: 귀하의 코멘트에 대답.

는 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; 
}