ajax 入门案例

最新推荐文章于 2023-04-12 23:37:53 发布

蜕变之痛

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/liuxueyi521/article/details/52738848

版权

1、效果如下图，选择一个省份，自动再下方显示省会：

2、以下为a.php文件内容-----------

<html">
<head>
    <meta content="text/html; charset=gb2312" />
    <title>ajax应用实例</title>
<script>
    var xmlhttp=null;

    function GetXmlHttpRequest() {
        var xmlhttp=null;
        try{
            xmlhttp = new XMLHttpRequest();
        }
        catch (e){
            try{
                xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
               try{
                   xmlhttp = new ActiveXObject("Microsft.XMLHTTP");
               }
                catch (e){
                    xmlhttp = false;
                }
            }
        }
        return xmlhttp;
    }

    function sendRequest(){
        var tt=document.getElementById("province").value;

        xmlhttp = GetXmlHttpRequest();
        if(xmlhttp == null){
            alert("浏览器不支持");
            return;
        }

        var url = "b.php";
        url+="?prov=" + tt;
        xmlhttp.open("GET",url,true);
        xmlhttp.onreadystatechange = updatePage;
        xmlhttp.send(null);
    }

    function updatePage(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var response = xmlhttp.responseText;
            document.getElementById("city").innerHTML = response;
        }
    }


</script>


</head>

<body>
<h3>请选择一个省份</h3>

<form id="form" name="form" action="b.php">
    <div>
        <select id="province" name="province"  οnchange="sendRequest()">
            <option value="">请选择一个省份（自治区）</option>
            <option value="ah"> 安徽</option>
            <option value="fj">福建</option>
            <option value="gs"> 甘肃</option>
        </select>
    </div>
</form>

<div id="city">
</div>

</body>


</html>

3、以下为b.php内容：

<?php

$str = $_GET['prov'];

$city_Arr = array(
    "ah" =>"合肥",
    "fj"=>"福州",
    "gs"=>"兰州"
);
if(empty($_GET['prov'])){
    echo "您未选择省份。。。";
}
else{
    $prov = $_GET['prov'];
    $city =$city_Arr[$prov];
    echo iconv("GB2312","UTF-8",'您所选择的省份的省会为：'.$city);
}

?>

4、重点说明：

正确的：

xmlhttp.onreadystatechange = updatePage;

错误的：

xmlhttp.onreadystatechange = updatePage（）;

如果加了（）则只能调用一次updatePage。

蜕变之痛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫