-2

我是 web 基础应用程序开发的新手，我正在学习 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>";
  ?>
4

2 回答 2

0

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

document.getElementById('display').innerHTML = ajaxRequest.responseText;
于 2013-02-03T00:30:56.793 回答
0

根据要求，我将发表我的评论

在您的代码中，您需要更改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);
    });
于 2013-02-03T06:53:43.383 回答