Javascript. Passing input variables throughout pages via AJAX_问答_开发者

Javascript. Passing input variables throughout pages via AJAX

开发者 https://www.devze.com 2023-04-10 16:09 出处：网络

This is a Google suggestion-like script. I rewrote the AJAX Call code by splitting it up into multiple functions and seems this is a better cross-browser/usability approach. Now I need to pass the in

相关专题：javascript php

This is a Google suggestion-like script.

I rewrote the AJAX Call code by splitting it up into multiple functions and seems this is a better cross-browser/usability approach. Now I need to pass the input variable that I read from the input #search_text to a php file where I actually fetch the data from database.

For moment all I need is to pass search_text and display it with echo $_GET['search_text']; Can someone help me?

Here is the script

<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.statu开发者_高级运维s == 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>

and the php file is:

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

Thanks

The issue is that you're not actually passing in any data to the PHP script. In this case, you need to stick the 'search_text' parameter on the end of the URL, since you're expecting it to be a GET request.

startRequest("ajax-submit.php");

should be

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

this jQuery Solution is way easier and Cross-Browser compatible:

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