返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >Ajax如何结合php实现二级联动
  • 875
分享到

Ajax如何结合php实现二级联动

2024-04-02 19:04:59 875人浏览 安东尼
摘要

这篇文章给大家分享的是有关ajax如何结合PHP实现二级联动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下使用ajax,从php中获取数据<!DOCTYPE&n

这篇文章给大家分享的是有关ajax如何结合PHP实现二级联动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

具体内容如下

使用ajax,从php中获取数据

<!DOCTYPE html>
<html>
 <head>
 <title>Ajax案例一</title>
 <meta charset="utf-8" />
 </head>
 

 <body>

 <!-- 二级联动 -->
 <select id="province">
 <option>请选择</option>
 <option>山东省</option>
 <option>辽宁省</option>
 <option>吉林省</option>
 </select>
 <select id="city">
 <option>请选择</option>
 </select>
 <script>
 // 1. 为<select>元素绑定onchange事件
 var provinceEle = document.getElementById("province");
 provinceEle.onchange = function(){
 // 将id为city的元素内容清空
 var city = document.getElementById("city");
 var opts = city.getElementsByTagName("option");
 for(var z=opts.length-1;z>0;z--){
  city.removeChild(opts[z]);
 }
  
 // 2. 获取用户当前选择的省份名称
 var province = provinceEle.value;
 // 3. 创建对应的城市列表 - 数组
 var cities = [];
 switch (province){
  case "山东省":
  cities = ["青岛市","济南市","威海市","日照市","德州市"];
  break;
  case "吉林省":
  cities = ["长春市","松原市","吉林市","通化市","四平市"];
  break;
  case "辽宁省":
  cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
  break;
 }
 // 遍历城市列表

 for(var i=0;i<cities.length;i++){
  // 4. 创建<option>元素
  var option = document.createElement("option");
  // 5. 将城市的信息添加到<option>元素上
  var textnode = document.createTextNode(cities[i]);
  option.appendChild(textNode);
  // 6. 将创建的所有<option>元素添加到id为city元素上
  city.appendChild(option);
 }
  

 }

 </script>
 </body>

</html>

php:

<?php
 // 用于处理客户端请求二级联动的数据
 // 1. 接收客户端发送的省份信息
 $province = $_POST['provcince'];
 // 2. 判断当前的省份信息,提供不同的城市信息
 switch ($province){
 case '山东省':
  echo '青岛市,济南市,威海市,日照市,德州市';
  break;
 case '辽宁省':
  echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
  break;
 case '吉林省':
  echo '长春市,松原市,吉林市,通化市,四平市';
  break;
 }
 // 服务器端响应的是字符串

?>

感谢各位的阅读!关于“Ajax如何结合php实现二级联动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: Ajax如何结合php实现二级联动

本文链接: https://lsjlt.com/news/67687.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Ajax如何结合php实现二级联动
    这篇文章给大家分享的是有关Ajax如何结合php实现二级联动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下使用ajax,从php中获取数据<!DOCTYPE&n...
    99+
    2024-04-02
  • Ajax实现城市二级联动d
    这篇文章主要介绍了Ajax实现城市二级联动d,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html<select id="province"...
    99+
    2023-06-08
  • 如何实现AJAX下拉框省、市二级联动
    本篇内容介绍了“如何实现AJAX下拉框省、市二级联动”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!jsp页...
    99+
    2024-04-02
  • Ajax怎么实现城市二级联动
    小编给大家分享一下Ajax怎么实现城市二级联动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染HTML...
    99+
    2023-06-08
  • 使用Ajax怎么实现二级联动
    这篇文章将为大家详细讲解有关使用Ajax怎么实现二级联动,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。html<select id="province"&...
    99+
    2023-06-08
  • Ajax+php如何实现商品分类三级联动
    这篇文章将为大家详细讲解有关Ajax+php如何实现商品分类三级联动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。当页面加载时,利用ajax异步向后台请求数据,加载一级商...
    99+
    2024-04-02
  • ajax如何实现三级联动效果
    小编给大家分享一下ajax如何实现三级联动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ajax 实现三级联动,相当于写了一...
    99+
    2024-04-02
  • 如何实现ajax三级联动效果
    这篇文章主要为大家展示了“如何实现ajax三级联动效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现ajax三级联动效果”这篇文章吧。具体内容如下主页面...
    99+
    2024-04-02
  • js如何实现二级联动效果
    这篇文章主要介绍js如何实现二级联动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!示例代码:<!DOCTYPE html> <html> <...
    99+
    2024-04-02
  • jquery如何实现二级联动效果
    这篇文章给大家分享的是有关jquery如何实现二级联动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<!DOCTYPE html> <...
    99+
    2024-04-02
  • AJAX 中怎么实现二级联级菜单
    AJAX 中怎么实现二级联级菜单,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 客户端代码: <!DOCT...
    99+
    2024-04-02
  • React实现二级联动(左右联动)
    本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下 js代码 import { Component } from 'react' import './...
    99+
    2024-04-02
  • ajax怎么实现三级联动
    这篇文章主要介绍了ajax怎么实现三级联动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. test.php<script ...
    99+
    2024-04-02
  • Ajax实现三级联动效果
    本文实例为大家分享了Ajax实现三级联动效果的具体代码,供大家参考,具体内容如下 一、导入数据表和gson.jar 该表包括了中国所有的省、市、县、区,它们之间通过parentid关...
    99+
    2024-04-02
  • ajax实现城市三级联动
    本文实例为大家分享了ajax实现城市三级联动的具体代码,供大家参考,具体内容如下 在准备好服务器后 html部分 <div> <select n...
    99+
    2024-04-02
  • react如何实现导航栏二级联动
    这篇文章给大家分享的是有关react如何实现导航栏二级联动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下效果图js代码import { Component } ...
    99+
    2023-06-29
  • 使用Ajax怎么实现一个二级联动菜单
    本篇文章为大家展示了使用Ajax怎么实现一个二级联动菜单,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。index.jsp<%@ page language="ja...
    99+
    2023-06-08
  • php实现二级联动菜单的方法
    小编给大家分享一下php实现二级联动菜单的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php实现二级联动菜单的方法:首先创建好HTML文件和PHP文件;然后...
    99+
    2023-06-14
  • AJAX和WebService如何实现省市县三级联动
    小编给大家分享一下AJAX和WebService如何实现省市县三级联动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • Ajax如何实现省市区三级级联
    这篇文章主要介绍Ajax如何实现省市区三级级联,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实现Ajax实现省市区三级级联,需要Java解析json技术 整体Demo下载地址如下: 点我下载address.html&...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作