Provinz- und Stadtverknüpfungsfunktion realisiert durch PHP+Ajax-PHP-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die von PHP + Original-Ajax implementierte Provinz- und Stadtverknüpfungsfunktion vorgestellt. Er analysiert detailliert das Prinzip und die Implementierungsmethode der Ajax-Interaktion sowie die damit verbundenen Betriebsfähigkeiten von PHP in Kombination mit Ajax, um die Provinz zu realisieren Stadtverknüpfungs-Dropdown-Menüfunktion. Was wird benötigt? Weitere Informationen finden Sie unter

Der Kern von Ajax ist das JavaScript-Objekt XmlHttpRequest. Dieses Objekt wurde erstmals in Internet Explorer 5 eingeführt und ist eine Technologie, die asynchrone Anforderungen unterstützt. Kurz gesagt, XmlHttpRequest ermöglicht Ihnen die Verwendung von JavaScript, um Anfragen an den Server zu stellen und die Antworten zu verarbeiten, ohne den Benutzer zu blockieren.

XMLHttpRequest

Das XMLHttpRequest-Objekt ist in den meisten Browsern bereits implementiert und verfügt über eine einfache Schnittstelle, die die Weitergabe von Daten vom Client zum Server ermöglicht. Der aktuelle Vorgang des Benutzers wird jedoch nicht unterbrochen. Die mit XMLHttpRequest übertragenen Daten können in einem beliebigen Format vorliegen, obwohl der Name darauf hindeutet, dass Daten im XML-Format vorliegen.

Entwickler sollten bereits mit vielen anderen XML-bezogenen Technologien vertraut sein. XPath kann auf Daten in XML-Dokumenten zugreifen, es ist jedoch ein Verständnis des XML-DOM erforderlich. Ebenso ist XSLT die einfachste und schnellste Möglichkeit, HTML oder XML aus XML-Daten zu generieren. Viele Entwickler sind bereits mit Xpath und XSLT vertraut, daher ist es für AJAX sinnvoll, XML als Datenaustauschformat zu wählen. XSLT kann sowohl auf der Client- als auch auf der Serverseite verwendet werden und kann einen großen Teil der in JavaScript geschriebenen Anwendungslogik reduzieren.
Für 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");

Nach dem Login kopieren

Internet 7.0 und höher:

xmlhttp_request = new XMLHttpRequest();

Nach dem Login kopieren

Automatisch ermittelter Code:

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");
}

Nach dem Login kopieren

Um in praktischen Anwendungen mit mehreren verschiedenen Browserversionen kompatibel zu sein, wird die Methode zum Erstellen der XMLHttpRequest-Klasse im Allgemeinen in der folgenden Form geschrieben:

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(&#39;text/xml&#39;);
    }
  }
} catch(e) {
  xmlhttp_request = false;
}

Nach dem Login kopieren

Anfrage senden

Sie können open() aufrufen und senden( von HTTP-Anforderungsklasse), wie unten gezeigt:

xmlhttp_request.open(&#39;GET&#39;,URL,true);
xmlhttp_request.send(null);

Nach dem Login kopieren

open()s erster Parameter ist der HTTP-Anfragemethode – GET, POST oder was auch immer der Server unterstützt, den Sie aufrufen möchten. Gemäß der HTTP-Spezifikation muss dieser Parameter großgeschrieben werden; andernfalls können einige Browser (z. B. Firefox) die Anfrage möglicherweise nicht verarbeiten.

Der zweite Parameter ist die URL der angeforderten Seite.

Der dritte Parameter legt fest, ob sich die Anfrage im asynchronen Modus befindet. Bei TRUE setzt die JavaScript-Funktion die Ausführung fort, ohne auf eine Antwort vom Server zu warten. Dies ist das „A“ in „AJAX“.

Die Antwort des Servers

Dadurch muss dem HTTP-Anforderungsobjekt mitgeteilt werden, welche JavaScript-Funktion zur Verarbeitung dieser Antwort verwendet werden soll. Die onreadystatechange-Eigenschaft des Objekts kann wie folgt auf den Funktionsnamen des zu verwendenden JavaScripts gesetzt werden:

xmlhttp_request.onreadystatechange =FunctionName;

Nach dem Login kopieren

FunctionName wird erstellt in JavaScript Achten Sie darauf, den Funktionsnamen nicht als FunctionName() zu schreiben. Natürlich können wir den JavaScript-Code auch direkt nach onreadystatechange erstellen, zum Beispiel:

xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};

Nach dem Login kopieren

Überprüfen Sie zunächst den Status der Anfrage. Erst wenn eine vollständige Serverantwort empfangen wurde, kann die Funktion die Antwort verarbeiten. XMLHttpRequest stellt das Attribut „readyState“ zur Beurteilung der Serverantwort bereit.

readyState hat die folgenden Werte:

0 (nicht initialisiert)
1 (Laden)
2 (Laden abgeschlossen)
3 (Interagieren)
4 (Vollständig)

Also nur wenn readyState=4, wurde eine vollständige Serverantwort empfangen und die Funktion kann die Antwort verarbeiten. Der spezifische Code lautet wie folgt:

if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}

Nach dem Login kopieren

Wenn readyState=4, wurde eine vollständige Serverantwort empfangen. Dann wird die Funktion ausgeführt Überprüfen Sie den HTTP-Statuswert der Serverantwort. Der vollständige Statuswert ist im W3C-Dokument zu finden. Wenn der Antwortwert des HTTP-Servers 200 beträgt, bedeutet dies, dass der Status normal ist.

Verarbeiten Sie die vom Server erhaltenen Daten

Es gibt zwei Möglichkeiten, diese Daten abzurufen:

(1) Wie Text Gibt die Antwort des Servers in Form einer Zeichenfolge zurück
(2) Gibt die Antwort in Form eines XMLDocument-Objekts zurück

Anwendungsarchitektur Anwendungsframework

(Kleines Beispiel 1) -- ----- --demo5.php--get value passing method

<?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>

Nach dem Login kopieren

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);
?>

Nach dem Login kopieren

(Kleines Beispiel 2)

Wertübertragungsmethode demo6.php posten

<?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>

Nach dem Login kopieren

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);
?>

Nach dem Login kopieren

(Kleines Beispiel drei)----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>

Nach dem Login kopieren

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;
?>

Nach dem Login kopieren