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在页面中传递输入变量

回答

相关问题