使用ajax在搜索结果中显示记录

时间:2012-04-19 18:49:53

标签: php ajax

我有以下ajax.js,我必须使用:

var xmlRequest = null;
    function ajax(url, parametersArray, callbackFunction, fcnVars) {
        if (xmlRequest != null) {
        if (xmlRequest.readyState == 2 || xmlRequest.readyState == 3) {
            xmlRequest.abort();
            xmlRequest = null;
           }
        }
        if (parametersArray == null)
            parameters = "";
        else
            parameters = formatParameters(parametersArray);
        if (window.XMLHttpRequest)
            xmlRequest = new XMLHttpRequest();
        else
            xmlRequest = new ActiveXObject("MSXML2.XMLHTTP.3.0");
            xmlRequest.open("POST", url, true);
            xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlRequest.onreadystatechange = function() {
                if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
                    if (xmlRequest.responseText) {
                        callbackFunction(xmlRequest.responseText, fcnVars);
                    }
                }
            }
        xmlRequest.setRequestHeader("Content-length", parameters.length);
        xmlRequest.setRequestHeader("Connection", "close");
        xmlRequest.send(parameters);
    }

    function formatParameters(parameters) {
        var i = 0;
        var param = "";
        for (index in parameters) {
            if (i==0) {
                param += index+"="+urlencode(parameters[index]);
            } else {
                param += "&"+index+"="+urlencode(parameters[index]);
            }
            i++; 
        }
    return param;
    }

    function urlencode(clearString) {
        clearString = encodeURI(clearString);
        clearString = clearString.replace('&', '%26');
        return clearString;
    }

我有以下mysql表:

CREATE TABLE `dictionary` (
   `word` varchar(64) NOT NULL,
   PRIMARY KEY  (`word`)
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1

最后,这是我的搜索页面:

<div id = "search">
    <form id="searchform" method="post">
    Search for Word: 
    </select>
    <input type="text" id="search_term" name="search_term"  />
    <input type="submit" id="cmdSearch" value="Search"  />
</form>
<div id="search_results"></div>
</div>    

现在,我必须创建一个php函数,它将使用上面的ajax.js

返回一个包含表中找到的单词的数组。

结果应该使用ajax在search_results div中显示。

当然,我也需要一个javascript代码。

任何人都可以帮我开始构建这个吗?我用jquery做了类似的事情,但是现在我必须使用这个脚本,而我没办法做到这一点。

目标是在不刷新的情况下在php页面中显示结果。

任何帮助都将深受赞赏

更新

这是我的php代码:

<?php

// add encoding here
header("Content-Type: text/html; charset=iso-8859-7");

// include the database connection here
include 'config.php';
include 'openDb.php';
function findWords(){
    // sanitaze the user input
    $term = strip_tags(substr($_POST['search_term'],0, 100));
    $term = mysql_escape_string($term);

    // query the database. one fileld only, so nothing to optimize here
    $sql = "SELECT word FROM dictionary WHERE word like '%$term%'";
    $result = mysql_query($sql);

    // set the string variable
    $string = '';

    // if resulta are found then populate the string variable
    if (mysql_num_rows($result) > 0){
        while($row = mysql_fetch_object($result)){
            // display the results here in bold and add a new line or break after each     result  
            $string[] = "<b>".$row->user_name."</b><br/>\n";
        }
    } else {
        // if no results are found, inform the visitors...  
        $string[] = "No matches!";
    }
    // output the string
    return $string[];

这是javascript:

    <script type='text/javascript'>
    ajax("findWord.php", {id:search_term}, function(result,params) {
    alert("result for ID: "+params.id+"\n\n"+result);
    }, {id:search_term});
    </script>

1 个答案:

答案 0 :(得分:0)

您必须依赖ajax函数,该函数允许您访问回调函数中加载的任何内容:

callbackFunction(xmlRequest.responseText, fcnVars);

ajax解释了它应该如何被称为:

ajax(url, parametersArray, callbackFunction, fcnVars)

尽管parametersArray实际上应该是一个对象({index:value, i1:v2,...})而不是一个数组([val1, val2,...])。 fcnVars可以是包含您希望传递给回调函数的任何对象。

这应该有效:

ajax("add_page.php", {id:535}, function(result,params) {
    alert("result for ID: "+params.id+"\n\n"+result);
}, {id:535});