-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

リクエストに応じて、コメントを投稿します

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 に答える
0

value要素にプロパティを設定してい<p>ます。を設定する必要がありますinnerHTML。値は入力フィールドに使用されます。

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