PHP和ajax（一）

本篇文章是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;
}

?>

一、html页面：input.html

二、js页面：input.js

三、php页面：input.php

猜你喜欢