• Ajax+PHP简单实例


    一直用jQuery库,如果不用,还会使用Ajax吗?

    参考书:1.PHP与jQuery开发实例;2.Ajax基础教程 (图灵程序设计丛书就是好)

    把书1里jQuery代码换成原生JS,实例1是选择省份出现城市列表,实例2改成了联动下拉框。

    一、实例1

    html代码:

    <form>
        <p>
            <label for="province">省份:</label>
            <select id="choice" name="province">
                <option value="">请选择</option>
                <option value="JiangSu">江苏省</option>
                <option value="AnHui">安徽省</option>
         </select>
        </p>
        <div id="result"></div>    
    </form>                

    js代码:

                var xmlHttp;
                function createXMLHttpRequest() {
                    if (window.ActiveXObject) {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    else if (window.XMLHttpRequest) {
                        xmlHttp = new XMLHttpRequest();
                    }
                }
    function doSearch(event) { var province = document.getElementById("choice").value; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "data.php?province="+province, false); xmlHttp.send(null); }

           //也常取名callBack
    function handleStateChange() { if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ parseResults(); } } } function parseResults() { document.getElementById("result").innerHTML = xmlHttp.responseText; }
           //下拉框值改变出发事件
    var evtObject = document.getElementById("choice"); if(evtObject.addEventListener){ evtObject.addEventListener("change",doSearch,false); } else if(evtObject.attachEvent){ evtObject.attachEvent("onchange",doSearch); }

    PHP代码:

    <?php
        if($_GET['province']=='JiangSu'){
            $citys = array('南京', '苏州','南通','无锡');    
            echo getHTML($citys);
        }
        else if($_GET['province']=='AnHui'){
            $citys = array('合肥', '芜湖','黄山','宣城');
            echo getHTML($citys);
        }
        function getHTML($citys){
             $strResult = '<ul>';
            for($i=0; $i<count($citys); $i++){
            $strResult.='<li>'.$citys[$i].'</li>';
            }
            $strResult.='</ul>';
        
        return $strResult;
        }
    ?>

    插曲:原书实例中result是<p id="result"></p>,结果在ie6下 innerHTML 报错,所以换成了div。

    二、联动下拉框

    XMLHttpRequest对象提供了2个可以用来访问服务器响应的属性:1. responseText; 2. responseXML。

    第二个实例采用从XML文件中读取数据。

    XML代码

    <?xml version="1.0" encoding="UTF-8"?>
    <provinces>
        <province index="1" name="JiangSu">
            <name>江苏</name>
            <citys>
                <city>南京</city>
                <city>苏州</city>
                <city>南通</city>
                <city>无锡</city>
            </citys>
        </province>
        <province index="2" name="AnHui">
            <name>安徽</name>
            <citys>
                <city>合肥</city>
                <city>芜湖</city>
                <city>黄山</city>
                <city>宣城</city>
            </citys>
        </province>
    </provinces>

    PHP代码:

    <?php
        header("Content-Type: text/xml"); //必须指明,responseXML才能接收
        libxml_use_internal_errors(true); //抑制xml错误,便于代码自行处理错误
        $objXML = simplexml_load_file('data.xml');
        if(!$objXML){
            $errors = libxml_get_errors();
            foreach($errors as $error){
                echo $errors->message,'<br/>';
            }
        } else {
            if($_GET['province']=='JiangSu'){
                foreach($objXML->province as $province){
                    if($province->name == "江苏"){            
                        echo $province->citys->asXML();  //asXML(),返回xml字符串
                    }
                }    
            } else if ($_GET['province']=='AnHui'){
                foreach($objXML->province as $province){
                    if($province->name == "安徽"){            
                        echo $province->citys->asXML();
                    }
                }    
            }
        }
    ?>

     html代码:

        <form>
                <p>
                    <label for="province">省份:</label>
                    <select id="choice" name="province">                
                        <option value="JiangSu">江苏省</option>
                        <option value="AnHui">安徽省</option>
                    </select>
                    <label for="citys">城市:</label>
                    <select id="city" name="citys">  
                    </select>
                </p>     
            </form>

    JS代码:

    var xmlHttp;
                function createXMLHttpRequest() {
                    if (window.ActiveXObject) {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    else if (window.XMLHttpRequest) {
                        xmlHttp = new XMLHttpRequest();
                    }
                }
                function doSearch(event) {
                    
                    var province = document.getElementById("choice").value;
                    createXMLHttpRequest();
                    xmlHttp.onreadystatechange = handleStateChange;
                    xmlHttp.open("GET", "data.php?province="+province, false);                
                    xmlHttp.send(null);
                }
                function handleStateChange() {
                    
                    if(xmlHttp.readyState == 4){
                        if(xmlHttp.status == 200){
                            //clearPreviousResults();                        
                            parseResults();
                        }
                    }
                }        
                function parseResults() {
                    var xmlDoc = xmlHttp.responseXML;            
                    // var htmlStr="";
                    var cityName;
                    if(xmlDoc.getElementsByTagName("city")[0].text){
                        cityName = "text";    //IE6下 要用text 取 内容
                    } else {
                        cityName = "textContent";    //chrome下 要用textContent 取内容
                    }            
                    for(var i=0;i<xmlDoc.getElementsByTagName("city").length;i++){
                        document.getElementById("city").options[i] = new Option(xmlDoc.getElementsByTagName("city")[i][cityName],i)                  
                    }               
                }
                doSearch(); //加载页面的时候先执行一次,因为去掉了“请选择”
                var evtObject = document.getElementById("choice");
                if(evtObject.addEventListener){        
                    evtObject.addEventListener("change",doSearch,false);
                }
                else if(evtObject.attachEvent){        
                    evtObject.attachEvent("onchange",doSearch);
                }

    插曲:ie6下,取城市名 得用 xmlDoc.getElementsByTagName("city")[0].text,而Chrome下用textContent,因此我用字符串cityName代替,并且取城市名的时候用了数组写法,不能用“.”取值。 select 在ie6下 设置innerHTML,页面没效果,但值存在。

    以上2个实例在ie6和chrome下均可运行。哎,兼容性的确让人头疼,第二个实例JS部分花了好长时间才完全调好。时间太晚了,都没劲写感想了,洗洗睡了.......

  • 相关阅读:
    Linux文件和目录的权限
    nginx的默认web目录
    SSH-keygen rsa 密钥对根据私钥生成公钥
    对ajax的理解
    开关式复选框的操作
    关于弹框和原页面的切换问题
    单选框和复选框中value值得获取
    php中明明写了类函数,却报致命错误找不到类
    python函数
    python关键字
  • 原文地址:https://www.cnblogs.com/zhyxBlog/p/3301906.html
Copyright © 2020-2023  润新知