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);
的
第一個參數
是請求頁面的URL。
第三個參數
伺服器的回應
這需要告訴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 (完成)
if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}#當readyState=4時，一個完整的伺服器回應已經收到了，接著，函數會檢查HTTP伺服器回應的狀態值。完整的狀態取值可參考W3C文檔。當HTTP伺服器回應的值為200時，表示狀態正常。
有兩種方式可以得到這些資料：
(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);
?><?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><?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);
?><?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><?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;
?>#
以上是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
討論 CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP 是 PHP 的開源框架。它旨在使應用程式的開發、部署和維護變得更加容易。 CakePHP 基於類似 MVC 的架構，功能強大且易於掌握。模型、視圖和控制器 gu
如何設定 Visual Studio Code (VS Code) 進行 PHP 開發
Dec 20, 2024 am 11:31 AM
Visual Studio Code，也稱為 VS Code，是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展，可以輕鬆編寫
CakePHP 快速指南
Sep 10, 2024 pm 05:27 PM
CakePHP 是一個開源MVC 框架。它使應用程式的開發、部署和維護變得更加容易。 CakePHP 有許多函式庫可以減少大多數常見任務的過載。
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
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 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.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、
