您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP基础

如何创建基于原生Ajax的PHP应用程序

作者:UncleToo  来源:原创  日期:2014-12-09 10:14:17
收藏  评论:( 0 )  阅读:446

       在本节PHP教程中,我们将创建一个简单的应用程序,允许用户搜索流行的PHP MVC框架。页面提供一个文本框,用户输入的框架名称,然后使用AJAX搜索匹配,最后显示完整的框架的名称。

创建 index.php 页面

<html>
    <head>
        <title>PHP MVC Frameworks - Search Engine</title>
        <script type="text/javascript" src="http://www.uncletoo.com/auto_complete.js"></script>
    </head>
    <body>
        <h2>PHP MVC Frameworks - Search Engine</h2>
        <p><b>Type the first letter of the PHP MVC Framework</b></p>
        <form method="POST" action="index.php">
            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>
        </form>
        <p>Matches: <span id="txtName"></span></p>
    </body>
</html>

这里:

  • onkeyup="showName(this.value)":每次输入字符后自动搜索


创建用于处理搜索请求的 frameworks.php 页面

<?php
$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;
$name = $_GET["name"];
if (strlen($name) > 0) {
    $match = "";
    for ($i = 0; $i < count($frameworks); $i++) {
        if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {
            if ($match == "") {
                $match = $frameworks[$i];
            } else {
                $match = $match . " , " . $frameworks[$i];
            }
        }
    }
}
echo ($match == "") ? 'no match found' : $match;
?>


创建JS脚本文件 auto_complete.js

<script>
function showName(str){
    if (str.length == 0){ //exit function if nothing has been typed in the textbox
        document.getElementById("txtName").innerHTML=""; //clear previous results
        return;
    }
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("txtName").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","frameworks.php?name="+str,true);
    xmlhttp.send();
}
</script>

这里:

  • if (str.length == 0):检查字符串的长度。 如果为0,那么不执行该脚本的其余部分。

  • if (window.XMLHttpRequest):针对不同浏览器使用不同的AJAX方式

  • xmlhttp.onreadystatechange=function:如果AJAX请求成功输出结果


测试

在本地浏览 index.php 文件,如下图:

在文本框中输入要查询的字符串,效果如下:

这个例子就是一个简单的原生AJAX与PHP结合使用的示例




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/base/1068.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论