PHP+ajax实现的省市联动功能
这篇文章主要介绍了PHP+原生态ajax实现的省市联动功能,较为详细的分析了ajax交互的原理、实现方法以及php结合ajax实现省市联动下拉菜单功能的相关操作技巧,需要的朋友可以参考下
具体如下：
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
XMLHttpRequest
XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。
开发人员应该已经熟悉了许多其他XML相关的技术。XPath可以访问XML文档中的数据，但理解XML DOM是必须的。类似的，XSLT是最简单而快速的从XML数据生成HTML或XML的方式。许多开发人员已经熟悉Xpath和XSLT，因此AJAX选择XML作为数据交换格式是有意义的。XSLT可以被用在客户端和服务端，它能够减少大量的用JavaScript编写的应用逻辑。
对于Internet Explorer浏览器：
Internet 5.0-6.0:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");Internet 7.0及以上:
xmlhttp_request = new XMLHttpRequest();
自动判断的代码:
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：
try {
if (window.ActiveXObject) {
for (var i = 5; i; i--) {
try {
if (i == 2) {
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
xmlhttp_request.setRequestHeader("Content-Type", "text/xml");
xmlhttp_request.setRequestHeader("Charset", "gb2312");
}
break;
} catch(e) {
xmlhttp_request = false;
}
}
} else if (window.XMLHttpRequest) {
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
} catch(e) {
xmlhttp_request = false;
}发送请求
可以调用HTTP请求类的open()和send()方法，如下所示：
xmlhttp_request.open('GET',URL,true); xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。
服务器的响应
这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下：
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：
if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。
处理从服务器得到的数据
有两种方式可以得到这些数据：
(1) 以文本字符串的方式返回服务器的响应
(2) 以XMLDocument对象方式返回响应
应用程序架构应用程序框架
(小例子一)---------demo5.php--get传值方式
<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
<head>
<title>事件</title>
</head>
<body>
<form action="#" method="post">
用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
密码<input type="password" value="" name="upwd" id="upwd"/> <br />
<input type="submit" value="注册"/> <br />
</form>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//全局对象
var http = null;
var uname = $("uname");
uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
if(window.XMLHttpRequest){
// FF GOOLE IE 8 9 10
http = new XMLHttpRequest();
}else{
//IE 6 7
http = new ActiveXObject("Micrsoft.XMLHTTP");
}
//2:准备url地址与参数 ?? bug
var url = "demo51_do.php?uname="+$("uname").value;
//3:定义处理返回结果方法
http.onreadystatechange = result;
//4:发送请求
http.open('GET',url,true);//异步
http.send(null);
};
//5:接收服务器返回结果
function result(){
//6:判断状态 接收完成 0 初始 1 发送 2处理 3 发送结果
//4:发送结果结束
//404 not found
//200 ok 正确响就能
//7:判断状态 数据正确
if(http.readyState == 4 && http.status == 200){
//8:接收返回结果 {text/xml}
var rs = http.responseText;
//9:显示结果
var ms = "";
if(rs == 1){
ms = "己存在";
}else{
ms = "可以使用";
}
$("msg").innerHTML = ms;
}
}
</script>
</body>
</html>demo51_do.php
<?php
header("content-type:text/html;charset=utf-8");
$uname = $_GET['uname'];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = '{$uname}'";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
if($row[0] == 1){
echo "1";//己存在
}else{
echo "0";//不存在可以使用
}
}
mysql_free_result($rs);
mysql_close($link);
?>(小例子二)
post传值方式demo6.php
<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
<head>
<title>事件</title>
</head>
<body>
<form action="#" method="post">
用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
密码<input type="password" value="" name="upwd" id="upwd"/> <br />
<input type="submit" value="注册"/> <br />
</form>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var http = null;
var uname = $("uname");
uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
//2:准备url地址与参数
var url = "demo6_do.php";
//3:定义处理返回结果方法
http.onreadystatechange = result;
//4:发送请求
http.open('POST',url,true);
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send("uname="+$("uname").value);
};
//5:接收服务器返回结果
function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
if(http.readyState == 4 && http.status == 200){
//8:接收返回结果 {text/xml}
var rs = http.responseText;
var ms = "";
if(rs == 1){
ms = "己存在";
}else{
ms = "可以使用";
}
//9:显示结果
$("msg").innerHTML = ms;
}
}
</script>
</body>
</html>demo6_do.php
<?php
header("content-type:text/html;charset=utf-8");
$uname = $_POST['uname'];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = '{$uname}'";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
if($row[0] == 1){
echo "1";//己存在
}else{
echo "0";//不存在可以使用
}
}
mysql_free_result($rs);
mysql_close($link);
?>(小例子三)----xml
demo7.php
<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
<head>
<title>事件</title>
</head>
<body>
<form action="#">
省
<select name="sel" id="sel">
<option value='0'>--请选择--</option>
<option value='1'>--河北--</option>
<option value='2'>--河南--</option>
<option value='3'>--广东--</option>
</select>
市
<select name="city" id="city">
<option value='0'>--请选择--</option>
</select>
</form>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var http = null;
var sel = $("sel");
sel.onchange = function(){
//1:创建对象 xmlhttprequest 对象
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
//2:准备url地址与参数
var url = "demo7_do.php?shen="+$("sel").value;
//3:定义处理返回结果方法
http.onreadystatechange = result;
//4:发送请求
http.open('GET',url,true);
http.send(null);
};
//5:接收服务器返回结果
function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
if(http.readyState == 4 && http.status == 200){
//8:接收返回结果 {text/xml}
var rs = http.responseXML;
var citys = rs.getElementsByTagName("city");
for(var i = 0;i < citys.length;i++){
var o = document.createElement("option");
o.value = ""+(i+1);
o.text = citys[i].firstChild.data;
$("city").add(o,null);
}
//9:显示结果
}
}
</script>
</body>
</html>demo7_do.php
<?php
header("content-type:text/xml;charset=utf-8");
$shen = $_GET['shen'];
if($shen == "1"){
$city = "<root><city>石家庄</city><city>保定</city><city>沧州</city></root>";
}else if($shen == "2"){
$city = "<root><city>郑州</city><city>新乡</city><city>登封</city></root>";
}else if($shen == "3"){
$city = "<root><city>东莞</city><city>中山</city><city>广州</city></root>";
}
echo $city;
?>相关推荐：
Ajax PHP无刷新二级联动下拉菜单(省市联动)源码_PHP教程
以上是PHP+ajax实现的省市联动功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南
Dec 24, 2024 pm 04:42 PM
PHP 8.4 带来了多项新功能、安全性改进和性能改进，同时弃用和删除了大量功能。 本指南介绍了如何在 Ubuntu、Debian 或其衍生版本上安装 PHP 8.4 或升级到 PHP 8.4
如何设置 Visual Studio Code (VS Code) 进行 PHP 开发
Dec 20, 2024 am 11:31 AM
Visual Studio Code，也称为 VS Code，是一个免费的源代码编辑器 - 或集成开发环境 (IDE) - 可用于所有主要操作系统。 VS Code 拥有针对多种编程语言的大量扩展，可以轻松编写
您如何在PHP中解析和处理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示了如何使用PHP有效地处理XML文档。 XML（可扩展的标记语言）是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储
我后悔之前不知道的 7 个 PHP 函数
Nov 13, 2024 am 09:42 AM
如果您是一位经验丰富的 PHP 开发人员，您可能会感觉您已经在那里并且已经完成了。您已经开发了大量的应用程序，调试了数百万行代码，并调整了一堆脚本来实现操作
在PHP API中说明JSON Web令牌（JWT）及其用例。
Apr 05, 2025 am 12:04 AM
JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、
php程序在字符串中计数元音
Feb 07, 2025 pm 12:12 PM
字符串是由字符组成的序列，包括字母、数字和符号。本教程将学习如何使用不同的方法在PHP中计算给定字符串中元音的数量。英语中的元音是a、e、i、o、u，它们可以是大写或小写。 什么是元音？ 元音是代表特定语音的字母字符。英语中共有五个元音，包括大写和小写： a, e, i, o, u 示例 1 输入：字符串 = "Tutorialspoint" 输出：6 解释 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。总共有 6 个元
解释PHP中的晚期静态绑定（静态：:)。
Apr 03, 2025 am 12:04 AM
静态绑定（static::）在PHP中实现晚期静态绑定（LSB），允许在静态上下文中引用调用类而非定义类。1）解析过程在运行时进行，2）在继承关系中向上查找调用类，3）可能带来性能开销。
什么是PHP魔术方法（__ -construct，__destruct，__call，__get，__ set等）并提供用例？
Apr 03, 2025 am 12:03 AM
PHP的魔法方法有哪些？PHP的魔法方法包括：1.\_\_construct，用于初始化对象；2.\_\_destruct，用于清理资源；3.\_\_call，处理不存在的方法调用；4.\_\_get，实现动态属性访问；5.\_\_set，实现动态属性设置。这些方法在特定情况下自动调用，提升代码的灵活性和效率。
