Javascript。通過AJAX在頁面中傳遞輸入變量

這是一個類似谷歌建議的腳本。Javascript。通過AJAX在頁面中傳遞輸入變量

我重寫了AJAX調用代碼，將其分解爲多個函數，看起來這是一個更好的跨瀏覽器/可用性方法。現在我需要將從輸入#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

Javascript。通過AJAX在頁面中傳遞輸入變量

回答

相關問題