PHP和ajax（一）

小编 2026-06-20 阅读:1465 评论:0

本篇文章是php中使用ajax的案例，该案例有三个文件组成：html文件，js文件，php文件。这个案例实现了一个简单的功能：有一个文本框，当在文本框中输入内容的时候，在页面上会有提示信息展示出来，...

本篇文章是php中使用ajax的案例，该案例有三个文件组成：html文件，js文件，php文件。这个案例实现了一个简单的功能：有一个文本框，当在文本框中输入内容的时候，在页面上会有提示信息展示出来，如下图所示：

$\"\"$ $\"\"$

一、html页面：input.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=\"utf-8\" />
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <title>Page Title</title>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    
</head>
<body>
    name: <input type=\"text\" name=\"name\" id=\"txt01\">
    <p>
        Suggestion: <span id=\"txtHint\"></span>
    </p>
    <script src=\"input.js\"></script>
</body>
</html>

二、js页面：input.js

(function(){// 用于获取xmlHttpRequest
function GetXmlHttpObject(){
    var xmlHttp = null;
    try{
        // Firfox, Opera 8+, safari
        xmlHttp = new XMLHttpRequest();
    }catch(e){
        try{
            // Internet Explorer
            xmlHttp = new ActiveXObject(\"Msxml2.XMLHTTP\");
        }catch(e){
            xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
        }
    }
    return xmlHttp;
}
var xmlHttp;

// 展示hint
function showHint(str){
    if(str.length == 0){
        document.getElementById(\"txtHint\").innerHTML = \"\";
        return;
    }
    // 创建xmlHttp
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp==null){
        console.log(\"Brower does not suppert Http Request.\");
        return;
    }
    xmlHttp.onreadystatechange = stateChanged;
    url = generateUrl(\"input.php\",str);
    console.log(url);
    xmlHttp.open(\"GET\",url,true);
    xmlHttp.send(null);
}

// 拼接url，拼接一个随机数，防止使用缓存
function generateUrl(php_path,str){
    var url = php_path+\"?q=\"+str;
    url += \"&sid=\"+Math.random();
    return url;
}

function stateChanged(){
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == \"complete\"){
        document.getElementById(\"txtHint\").innerHTML = xmlHttp.responseText;
    }
}

// 添加监听事件
var inputObj = document.getElementById(\"txt01\");

inputObj.removeEventListener(\"keyup\",function(){
    showHint(inputObj.value);
});
inputObj.addEventListener(\"keyup\",function(){
    showHint(inputObj.value);
});
})();

三、php页面：input.php

<?php
// 填充数组
$a = array(\"Anna\", \"Brittany\", \"Cinderella\", \"Diana\", \"Eva\", 
          \"Fiona\", \"Gunda\", \"Hege\", \"Inga\", \"Johanna\", \"Kitty\", 
          \"Linda\", \"Nina\", \"Ophelia\", \"Petunia\", \"Amanda\", \"Raquel\", 
          \"Cindy\", \"Doris\", \"Eve\", \"Evita\", \"Sunniva\", \"Tove\", \"Unni\", 
          \"Violet\", \"Liza\", \"Elizabeth\", \"Ellen\", \"Wenche\", \"Vicky\");
#print_r($a);
// 从url请求中获取q参数
$q = $_GET[\"q\"];

// 如果 $q的长度大于0，从数组中查找所有的长度
if(strlen($q)>0){
    $hint = \"\";
    for($i=0;$i<count($a);$i++){
        if(strtolower($q) === strtolower(substr($a[$i],0,strlen($q)))){
            if($hint===\"\"){
                $hint = $a[$i];
            }else{
                $hint =$hint.\", \".$a[$i];
            }
        }
    }
    // 如果提示没有发现，就输出 “no suggestion”
    // or to the current values
    if($hint === \"\"){
        $response = \"no suggestion\";
    }else{
        $response = $hint;
    }

    // 输出$response
    echo $response;
}

?>