js+php做省份城市选择,三级联动,前后端简单交互,最详细

需要先安装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">
    <met
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于HTML、JavaScript和Ajax的省份城市区县三级联动示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省份城市区县三级联动示例</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <label>省份:</label> <select id="province" onchange="getCity()"> <option value="">请选择省份</option> </select> <label>城市:</label> <select id="city" onchange="getDistrict()"> <option value="">请选择城市</option> </select> <label>区县:</label> <select id="district"> <option value="">请选择区县</option> </select> <script> $(document).ready(function () { $.ajax({ url: 'province.json', // 省份JSON文件地址 type: 'get', dataType: 'json', success: function (data) { for (var i = 0; i < data.length; i++) { $('#province').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); }); function getCity() { var provinceId = $('#province').val(); $('#city').empty(); $('#city').append('<option value="">请选择城市</option>'); $('#district').empty(); $('#district').append('<option value="">请选择区县</option>'); if (provinceId != '') { $.ajax({ url: 'city.json', // 城市JSON文件地址 type: 'get', dataType: 'json', data: {provinceId: provinceId}, success: function (data) { for (var i = 0; i < data.length; i++) { $('#city').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } } function getDistrict() { var cityId = $('#city').val(); $('#district').empty(); $('#district').append('<option value="">请选择区县</option>'); if (cityId != '') { $.ajax({ url: 'district.json', // 区县JSON文件地址 type: 'get', dataType: 'json', data: {cityId: cityId}, success: function (data) { for (var i = 0; i < data.length; i++) { $('#district').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } } </script> </body> </html> ``` 上述代码中,通过jQuery的Ajax方法从服务器获取省份城市、区县的JSON数据,并利用JavaScript将其插入到HTML的select标签中。当用户选择省份时,通过onchange事件触发getCity()函数获取该省份城市列表,用户选择城市时,再通过onchange事件触发getDistrict()函数获取该城市的区县列表。最终,用户选择省份城市和区县将通过select标签的value属性提交到服务器进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值