Question

这是类似Google的建议脚本。

我重写了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'];
?>

由于

Answer 1

问题是您实际上并没有将任何数据传递给PHP脚本。在这种情况下，您需要将“search_text”参数粘贴在URL的末尾，因为您希望它是GET请求。

startRequest("ajax-submit.php");

应该是

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

Answer 2

这个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>

的JavaScript。通过AJAX在整个页面中传递输入变量

2 个答案: