2013-02-02 1 views
-2

저는 웹 기반 애플리케이션 개발 및 AJAX 학습의 초보자입니다. 여기 내 문제는, 일부 변수 (사용자 입력)와 AJAX 요청을 만들려고하고 같은 변수와 PHP 파일을 얻을. 아래에 내 코드가 있습니다. 만약 내가 빠진 것이 있거나 잘못하고 있다면 알려주세요. 나는 어떤 도움을 주셔서 감사합니다! 고맙습니다.AJAX를 사용하여 PHP 파일에 자바 변수 가져 오기

자바 스크립트 코드 :

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

에 부하를 변경할 수 있습니다에 대한 결과는 무엇을 얻고 있는가? 정확히 작동하지 않는 것은 무엇입니까? – thaJeztah

+2

jQuery에 대해 들었습니까? – mimipc

+2

'ajaxDisplay.value'를'ajaxDisplay.innerHTML'로 변경하십시오. – mplungjan

답변

0

당신은 <p> 요소에 value 속성을 설정합니다. 해당 설정은 innerHTML이어야합니다. 값은 입력 필드에 사용됩니다. 후안에 의해 정교로, 양식 필드 값이 컨테이너 태그 innerHTML을이 - 요청으로

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

, 나는 당신이 ajaxDisplay.valueajaxDisplay.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); 
    }); 
관련 문제