社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 後端開發 > php教程 > 主體

PHP+ajax實現的省市連動功能

墨辰丷
發布： 2023-03-26 16:18:01
原創
2290 人瀏覽過

這篇文章主要介紹了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(&#39;GET&#39;,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[&#39;uname&#39;];
$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 = &#39;{$uname}&#39;";
$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(&#39;POST&#39;,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[&#39;uname&#39;];
$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 = &#39;{$uname}&#39;";
$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=&#39;0&#39;>--请选择--</option>
    <option value=&#39;1&#39;>--河北--</option>
    <option value=&#39;2&#39;>--河南--</option>
    <option value=&#39;3&#39;>--广东--</option>
  </select>
  市
  <select name="city" id="city">
    <option value=&#39;0&#39;>--请选择--</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(&#39;GET&#39;,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[&#39;shen&#39;];
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教學###################

用Ajax寫的省市連動，修改時如何顯示地址裡已有的省和市

ajax-ecshop手機端省市連動bug

#

以上是PHP+ajax實現的省市連動功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
php php+ajax 功能
來源：php.cn
上一篇：php命名空間使用詳解 下一篇：php命名空間使用圖文教學（附程式碼）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PHP數組從URL參數中取得的行為不如預期 我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...
來自於 2024-04-06 22:09:02
0
1
1428
我應該在 apache 中哪裡放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用運行狀況檢查url登入訪問日誌。基於此鏈接，他們提到了有關修改Customlog指令的資訊。我不是關於需要更改Cust...
來自於 2024-04-06 22:03:59
0
1
990
傳回值中變數的格式是什麼？ 我是php的新學習者。我發現有一段程式碼：if($x<time()){return[false,'error'];}邏輯或變數並不重要，但我不明白[false,'error'...
來自於 2024-04-06 21:55:20
0
1
778
使用opentbs產生odt檔案時遇到的問題：相同key的值顯示在同一行而不是單獨的欄位中。 我正在使用一個名為OpenTbs的庫來使用PHP建立odt，我使用它是因為動態生成列和行。我知道如何建立行和列，但我不知道如何組織它們。讓我加入一個例子：所以首先我會將其添加到我的...
來自於 2024-04-06 20:18:18
0
1
483
依照ID對MySQL結果進行分組以便循環遍歷 我有一個表，其中有mysql中的航班資料。我正在編寫一個php程式碼，它將使用codeigniter3對資料進行分組和顯示journey_idair_idFlightDuratio...
來自於 2024-04-06 17:27:56
0
1
406
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板