需要先安装xampp,,免费的软件,然后运行apache,我安装的英文版
没有红色或×或者报错,就能正常运行,如果软件有报错问题,可以网上搜索相关解决方案,都有.
文件我写了四个,一个html,三个php,都放在xampp文件夹的htdocs或者dashboard里,要运行网页的时候,不能直接打开,要打开服务器网页,然后根据路径打开,我的在网页上的路径是这样的,http://127.0.0.1/dashboard/37.html
我的文件夹里面会有软件相关的文件,和此次代码用到的文件
写代码前要知道的知识
使用ajax的四个步骤:
dom增加的操作
下面是html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="province">
<option value="">--请选择省份--</option>
</select>
<select name="" id="city">
<option value="">--请选择城市--</option>
</select>
<select name="" id="county">
<option value="">--请选择区县--</option>
</select>
<script>
var province = document.getElementById("province")
var city = document.getElementById("city")
var county = document.getElementById("county")
//Ajax的步骤
var xml = new XMLHttpRequest(); //这里有括号,然后1.创建核心对象
xml.open("get", "province.php", true); //2.创建请求
xml.send(null); //3.发送请求参数
xml.onreadystatechange = function () { //4.接收响应
if (xml.readyState == 4 && xml.status == 200) {
var procinces = xml.responseText; //上面到这里的三行是固定格式,下面到if结尾是自己写的代码,然后这一行得到的是文本内容
var provincesArr = procinces.split(","); // 上一行的文本内容在这里转成了数组
for (var i = 0; i < provincesArr.length; i++) {
var option = document.createElement("option"); //dom增加 1.创建元素
province.appendChild(option); //添加到对应的位置
option.innerHTML = provincesArr[i]; //添加对应的属性和内容,省份已经变成了数组形式,所以可以用i,
}
}
}
//城市
province.onchange = function () { //当鼠标点击省份,选项改变的时候要做的事
city.innerHTML = "<option>--请选择城市-- </option> "; //省份改变了,清空上一次已选的选项内容,看见的是与当前省份对应的城市
county.innerHTML = "<option>--请选择区县-- </option> "; //省份改变了,清空区县的选项内容
xml.open("post", "city.php", true);
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //用post,需要设置这个请求头,只加了这个,其他与get一样的步骤
var province = document.getElementById("province")
xml.send("provinceValue=" + province.value);
xml.onreadystatechange = function () {
if (xml.readyState == 4 && xml.status == 200) {
var cities = xml.responseText;
var citiesArr = cities.split(",");
for (var i = 0; i < citiesArr.length; i++) {
var option = document.createElement("option");
city.appendChild(option);
option.innerHTML = citiesArr[i];
}
}
}
}
//县区 county
city.onchange = function () {
county.innerHTML = "<option>--请选择区县-- </option> ";
xml.open("post", "county.php", true);
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var city = document.getElementById("city")
xml.send("cityValue=" + city.value);
xml.onreadystatechange = function () {
if (xml.readyState == 4 && xml.status == 200) {
var counties = xml.responseText;
var countiesArr = counties.split(",");
for (var i = 0; i < countiesArr.length; i++) {
var option = document.createElement("option");
county.appendChild(option);
option.innerHTML = countiesArr[i];
}
}
}
}
</script>
</body>
</html>下面是三个php代码
省份
<?php
echo "山东,浙江,四川,广东";
?>城市
<?php
$provinceValue=$_REQUEST["provinceValue"];
if($provinceValue=="山东"){
echo"青岛,济南,烟台,潍坊";
}else if($provinceValue=="浙江"){
echo"杭州,宁波,温州,湖州";
}
else if($provinceValue=="四川"){
echo"成都,绵阳,温江,宜宾";
}
else if($provinceValue=="广东"){
echo"广州,东莞,汕头,珠海";
}
?>县区
<?php
$cityValue=$_REQUEST["cityValue"];
if($cityValue=="青岛"){
echo"城阳区,李沧区,崂山区";
}else if($cityValue=="济南"){
echo"天桥区,济阳区,章丘区";
}
else if($cityValue=="杭州"){
echo"西湖区,萧山区,钱塘区";
}
else if($cityValue=="温州"){
echo"龙湾区,洞头,瑞安市";
}
运行图
版权声明：本文为aa147258aa147原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。