獲取JavaScript變量使用AJAX

-2

我在網絡基礎應用開發和Im學習AJAX新手的PHP文件。這是我的問題，我試圖用一些變量（用戶輸入）做出一個AJAX請求，並獲取具有相同變量的PHP文件。下面是我的代碼，如果有什麼我失蹤或我做錯了請讓我知道，我會感謝任何幫助！謝謝。獲取JavaScript變量使用AJAX

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

來源

2013-02-02 user1661865

的結果是什麼你得到？什麼不工作？ – thaJeztah

你聽說過jQuery嗎？ – mimipc

更改'ajaxDisplay.value'到'ROFL ajaxDisplay.innerHTML' – mplungjan

你是一個<p>元素上設置value屬性。你應該設置它的innerHTML。值用於輸入字段。

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

來源

2013-02-03 00:30:56

按照要求，我會後我的評論

在你的代碼需要更改ajaxDisplay.value到ajaxDisplay.innerHTML - 胡安所闡述的，表單字段具有值和容器標籤具有的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-03 06:53:43 mplungjan

獲取JavaScript變量使用AJAX

回答

相關問題