자바 스크립트. AJAX를 통해 페이지 전체에 입력 변수 전달하기

이것은 Google의 제안과 같은 스크립트입니다.자바 스크립트. AJAX를 통해 페이지 전체에 입력 변수 전달하기

나는 AJAX Call 코드를 여러 함수로 분리하여 다시 작성했으며 브라우저 간/사용성 측면에서 더 나은 접근 방법이라고 생각합니다. 이제는 입력 #search_text에서 읽은 입력 변수를 데이터베이스에서 실제로 데이터를 가져 오는 php 파일로 전달해야합니다.

내가 필요한 것은 search_text를 전달하고 echo $ _GET [ 'search_text'];로 표시하는 것입니다. 누군가 나를 도울 수 있습니까? 여기

스크립트

<script type="text/javascript"> 
    /*note xmlHttp needs to be a global variable. Because it is not it requires that function handleStateChange to pass the xmlHttp 
    handleStateChange is written in such a way that is expects xmlHttp to be a global variable.*/ 
    function startRequest(getURL){ 
      var xmlHttp = false; 
      xmlHttp = createXMLHttpRequest(); 
      //xmlHttp.onreadystatechange=handleStateChange; 
      xmlHttp.onreadystatechange=function(){handleStateChange(xmlHttp);} 
      xmlHttp.open("GET", getURL ,true); 
      xmlHttp.send(); 
    } 

    function createXMLHttpRequest() { 
     var _msxml_progid = [ 
     'Microsoft.XMLHTTP', 
     'MSXML2.XMLHTTP.3.0', 
     'MSXML3.XMLHTTP', 
     'MSXML2.XMLHTTP.6.0' 
     ]; 
     //req is assiqning to xmlhttp through a self invoking function 
     var xmlHttp = (function() { 
     var req; 
     try { 
     req = new XMLHttpRequest(); 
     } catch(e) { 
     var len = _msxml_progid.length; 
     while(len--) { 
      try { 
       req = new ActiveXObject(_msxml_progid[len]); 
       break; 
      } catch(e2) { } 
     } 
     } finally { 
     return req; 
     } 
     }()); 

     return xmlHttp; 
     } 

    //handleStateChange is written in such a way that is expects xmlHttp to be a global variable. 
    function handleStateChange(xmlHttp){ 
      if(xmlHttp.readyState == 4){ 
        if(xmlHttp.status == 200){ 
          //alert(xmlHttp.status); 
          //alert(xmlHttp.responseText); 
          document.getElementById("results").innerHTML = xmlHttp.responseText; 
        } 
      } 
    } 

    function suggest() { 

     startRequest("ajax-submit.php"); 
    } 
    </script> 



<body> 
     <form action="" name="search" id="search"> 
     <input type="text" name="search_text" id="search_text" onkeydown="suggest();" /> 
     </form> 
     <div id="results" style="background:yellow"></div> 
</body>

하고 PHP 파일은 다음과 같습니다

<?php 
echo 'Something';//'while typing it displays Something in result div 
//echo $_GET['search_text']; 
?>

감사

출처

2011-10-05 Kandinski

스크립트를 제공하고 도움을 요청했지만, 당신이하지 않은 실제로 잘못된 것이 무엇인지 나타 냈습니다. FWIW, 내 충고는이 모든 것을 버리고 이미이 작업을 수행하고있는 jQuery/Prototype/YUI 중 하나를 선택하는 것입니다. 바퀴 달린 시간을 다시 보내면 결코 자동차를 만들 수 없습니다. –

문제는 당신이 실제로 PHP 스크립트에 데이터를 전달하지 않을 것입니다 . 이 경우 'search_text'매개 변수를 URL 끝 부분에 붙여야합니다. GET 요청 일 것으로 기대하기 때문입니다.

startRequest("ajax-submit.php");

startRequest("ajax-submit.php?search_text="+document.search.search_text.value);

출처

2011-10-05 14:21:48 thedaian

POST 요청이 명시 적 변수없이 데이터를 자동으로 전송한다고 생각하십니까? 나는 매우 관심이 있습니다. 단서를 가져 주셔서 감사합니다! – Kandinski

잘못 입력 된 문자가있는 것 같아요 : ajax-submit.php? search_text = "+ document.search.search_text.value,? 대신."그러나 여전히 그것을 취하지 않습니다. 브라우저의 URL 입력에서 테스트를 시도했습니다. 그리고 그것은 실시간으로 작성해야합니다. 아직 운이 없습니다. – Kandinski

POST 요청은 URL에 변수를 추가하지 않고 데이터를 보낼 수있게하지만,이 값을 AJAX 스크립트로 보내고 데이터로 URL에 전달해야합니다. – thedaian

이의 jQuery 해결 방법 쉽게 호환 크로스 브라우저해야한다 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $('#search_text').keydown(function(){  // Bind event to KeyDown 

      var search_text = $(this).val();  // get value of input field 

      $.ajax({        // fire Ajax Request 
      url: "ajax-submit.php?search_text=" + search_text, 
      success: function(result){ 
       $("#results").html(result);   // on success show result. 
      } 
      }); 
     }); 

    }); 
    </script> 


<body> 
     <form action="" name="search" id="search"> 
     <input type="text" name="search_text" id="search_text" /> 
     </form> 
     <div id="results" style="background:yellow"></div> 
</body>

출처

2011-10-06 14:02:42

자바 스크립트. AJAX를 통해 페이지 전체에 입력 변수 전달하기

답변

관련 문제