Question

我有一个带有两个jQuery滑块的php页面（ index.php ），该滑块在2输入文本框中显示值，将这些值提交到另一个php页面（ seatmap.php ）包含在 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函数中添加return false并将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;
}

当我使用AJAX时，为什么这个php会重新加载？

2 个答案: