Question

我是网络基础应用程序开发的新手，我正在学习AJAX。这是我的问题，我正在尝试用一些变量（用户输入）制作一个AJAX请求，并获得具有相同变量的php文件。下面是我的代码，如果有我遗漏的东西或我做错了请告诉我，我将不胜感激任何帮助！谢谢。

Javascript代码：

<script type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
  ajaxRequest = new XMLHttpRequest();
 }catch (e){
   try{
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
     }catch (e) {
  try{
     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }catch (e){
    document.getElementById("Alert").innerHTML= "*Your browser broke!";
    document.getElementById("Alert").style.color = '#E00000 ';
     return false;
   }
  }
 }
  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('display');
      ajaxDisplay.value = ajaxRequest.responseText;
     }
   }
 var input_building = document.getElementById('building').value;
 var input_room = document.getElementById('room').value;
 var queryString = "?building=" + input_building + "&room=" + input_room;
 ajaxRequest.open("GET", "map.php" + queryString, true);
 ajaxRequest.send(); 
}
 </script>

HTML：

  <select id="building" name="building">
     <option value="#" default >Select</option>
     <option value="Luis C. Monzon">Luis C. Monzon</option>
  </select>
  <input type="text" id="room" name="room" placeholder="eg. 208B / CH 116" >
  <input id="submit" type="button" value="submit" onclick="ajaxFunction()" >
  <p id="display"></p>

PHP文件：

<?php>
  $building = $_GET['building'];
  $room = $_GET['room'];

  echo "<h1>".$room." ".$building."</h1>";
  ?>

Answer 1

您正在value元素上设置<p>属性。你应该设置它的innerHTML。值用于输入字段。

document.getElementById('display').innerHTML = ajaxRequest.responseText;

Answer 2

根据要求，我会发表评论

在您的代码中，您需要将ajaxDisplay.value更改为ajaxDisplay.innerHTML - 由Juan详细说明，表单字段包含值，容器标记包含innerHTML。

为了捍卫jQuery的使用 - 我基本同意，对于简单的JavaScript，加载外部库可能有点过分 - 在Ajax的情况下，我相信jQuery可以满足所有浏览器的需求。

你的jQuery代码：

<!DOCTYPE html>
<html>
<head>
<title>Get building</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() { // run onload
  $("ajaxbutton").on("click",function() {
    var input_building = $('building').val();
    var input_room = $('room').val();
    var queryString = "?building=" + input_building + "&room=" + input_room;
    $("#display").load("map.php" + queryString); // get the room 
  });
});
</script>
</head>
<body>
<select id="building" name="building">
  <option value="#" default >Select</option>
  <option value="Luis C. Monzon">Luis C. Monzon</option>
</select>
<input type="text" id="room" name="room" placeholder="eg. 208B / CH 116" />
<input id="ajaxbutton" type="button" value="Find Building" />
<p id="display"></p>
</body>
</html>

注意：要更好地控制结果，您可以将负载更改为

    $.get("map.php" + queryString,function(data) {
      // do something with data here - for example if you use JSON
      $("#display").html(data);
    });

使用AJAX将Javascript变量获取到PHP文件

2 个答案: