Fonction de liaison province-ville réalisée par PHP+ajax

Cet article présente principalement la fonction de liaison province-ville implémentée par PHP + ajax original. Il analyse plus en détail le principe et la méthode de mise en œuvre de l'interaction ajax, ainsi que les compétences opérationnelles associées de PHP combinées avec ajax pour réaliser la province. et la fonction de menu déroulant de liaison avec la ville. Ce qui est nécessaire Les amis peuvent se référer à

pour plus de détails comme suit :

Le cœur d'Ajax est l'objet JavaScript XmlHttpRequest. Cet objet a été introduit pour la première fois dans Internet Explorer 5 et constitue une technologie qui prend en charge les requêtes asynchrones. En bref, XmlHttpRequest vous permet d'utiliser JavaScript pour envoyer des requêtes au serveur et gérer les réponses sans bloquer l'utilisateur.

XMLHttpRequest

L'objet XMLHttpRequest est déjà implémenté dans la plupart des navigateurs et possède une interface simple qui permet de transmettre des données du client au serveur, mais cela n'interrompra pas l'opération en cours de l'utilisateur. Les données transmises à l'aide de XMLHttpRequest peuvent être dans n'importe quel format, bien que leur nom suggère des données au format XML.

Les développeurs devraient déjà être familiers avec de nombreuses autres technologies liées à XML. XPath peut accéder aux données des documents XML, mais il est nécessaire de comprendre le DOM XML. De même, XSLT est le moyen le plus simple et le plus rapide de générer du HTML ou du XML à partir de données XML. De nombreux développeurs connaissent déjà Xpath et XSLT, il est donc logique qu'AJAX choisisse XML comme format d'échange de données. XSLT peut être utilisé à la fois côté client et côté serveur, et peut réduire une grande quantité de logique d'application écrite en JavaScript.
Pour 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 et supérieur :

xmlhttp_request = new XMLHttpRequest();

Code déterminé automatiquement :

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

Dans les applications pratiques, afin d'être compatible avec plusieurs versions différentes de navigateurs, la méthode de création de la classe XMLHttpRequest s'écrit généralement sous la forme suivante :

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

Envoyer la demande

peut appeler Requête HTTP Les méthodes open() et send() de la classe sont les suivantes :

xmlhttp_request.open('GET',URL,true);
xmlhttp_request.send(null);

open() Un paramètre est la méthode de requête HTTP : GET, POST ou tout ce que le serveur prend en charge et que vous souhaitez appeler. Selon la spécification HTTP, ce paramètre doit être en majuscule ; sinon, certains navigateurs (comme Firefox) pourraient ne pas être en mesure de traiter la requête.

Le deuxième paramètre est l'URL de la page demandée.

Le troisième paramètre définit si la requête est en mode asynchrone. Si VRAI, la fonction JavaScript poursuivra son exécution sans attendre une réponse du serveur. C'est le "A" dans "AJAX".

La réponse du serveur

Elle doit indiquer à l'objet de requête HTTP quelle fonction JavaScript utiliser pour traiter cette réponse. Vous pouvez définir la propriété onreadystatechange de l'objet sur le nom de la fonction JavaScript que vous souhaitez utiliser, comme ceci :

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName est utilisé Attention à ne pas écrire le nom de la fonction créée par JavaScript sous la forme FunctionName(). Bien entendu, nous pouvons également créer le code JavaScript directement après onreadystatechange, par exemple :

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

Vérifiez d'abord l'état de la demande. Ce n'est que lorsqu'une réponse complète du serveur a été reçue que la fonction peut gérer la réponse. XMLHttpRequest fournit l'attribut readyState pour juger la réponse du serveur.

readyState a les valeurs suivantes :

0 (non initialisé)
1 (chargement)
2 (chargement terminé)
3 (Interaction)
4 (Terminé)

Donc, seulement lorsque readyState=4, une réponse complète du serveur a été reçue et la fonction peut traiter la réponse. Le code spécifique est le suivant :

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

Lorsque readyState=4, une réponse complète du serveur a été reçue, puis le La fonction vérifiera la valeur d'état de la réponse du serveur HTTP. La valeur complète du statut peut être trouvée dans le document W3C. Lorsque la valeur de réponse du serveur HTTP est 200, cela indique que l'état est normal.

Traiter les données obtenues à partir du serveur

Il existe deux manières d'obtenir ces données :

(1) Comme text Renvoie la réponse du serveur sous forme de chaîne
(2) Renvoie la réponse sous forme d'objet XMLDocument

Architecture de l'application Framework d'application

(Petit exemple 1) -- ----- --demo5.php--obtenir la méthode de transmission de valeur

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

(Petit exemple 2)

méthode de transfert de valeur 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);
?>

(petit exemple 3)-- --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;
?>

Recommandations associées :

Menu déroulant de liaison secondaire Ajax PHP sans actualisation (Lien de province et de ville) source Tutoriel code_PHP

Écrit avec AjaxLien entre provinces et villes, comment afficher les provinces et villes existantes dans l'adresse lors de la modification

ajax- ecshop Version mobileLien province et villebug

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!