分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

PHP+ajax实现二级联动

发布时间:2023-09-06 02:35责任编辑:苏小强关键词:PHP

?

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>PHP+ajax实现二级联动</title></head><body> ???<select id="province"> ???????<option value="0">请选择省份</option> ???????<option value="1">北京</option> ???????<option value="2">河北</option> ???????<option value="3">山东</option> ???</select> ???<select id="city"> ???????<option value="0">请选择城市</option> ???</select></body><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>$(function(){ ???$("#province").change(function(){ ???????var province = $(this).val(); // 获取province的value值 ???????if(province == 0){ ???????????// province为0的时候停止;否则 ???????????return; ???????}else{ ???????????var url = ‘demo.php‘; ???????????$.ajax({ ???????????????url: url, ????????????// php的url路径 ???????????????type: ‘post‘, ???????????????data: {province:province}, ???????????????dataType: ‘json‘, ???????????????success: function(res) { ???????????????????if(res.code == 200){ ???????????????????????var option = ‘<option>请选择城市</option>‘; ???????????????????????var list = res.list; ???????????????????????for (var i = 0; i < list.length; i++) { ??// 循环返回的值(城市) ???????????????????????????option += "<option>" + list[i] + "</option>"; ???????????????????????} ???????????????????}else{ ???????????????????????var option = ‘<option>请选择城市</option>‘; ?// 请求失败(默认) ???????????????????} ???????????????????$("#city").html(option); ???// js刷新第二个下拉框的值 ???????????????} ???????????}) ???????} ???})})</script></html>
接下来为PHP代码,注释已表明;
?
<?php$province = $_POST[‘province‘]; ??????// 获取ajax传来的值$list[‘1‘] = [‘朝阳‘, ‘海淀‘, ‘西城‘];$list[‘2‘] = [‘保定‘, ‘唐山‘, ‘邯郸‘];$list[‘3‘] = [‘济南‘, ‘菏泽‘, ‘日照‘];if($list[$province]){ ????????????????// 数组存在值的情况下 ???echo json_encode([‘code‘=>200, ‘list‘=>$list[$province]]); ?// 200成功,$list[$province]传递相应的数据}else{ ???echo json_encode([‘code‘=>500]);}
?

?

PHP+ajax实现二级联动

原文地址:https://www.cnblogs.com/xiaocong-PHP-12685/p/10569772.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved