Maison >interface Web >js tutoriel >Comment réaliser un lien secondaire entre Ajax et PHP

Comment réaliser un lien secondaire entre Ajax et PHP

php中世界最好的语言original: 2018-04-03 17:14:262138parcourir

Cette fois, je vais vous montrer comment réaliser un lien secondaire avec Ajax combiné avec PHP. Quelles sont les précautions pour Ajax combiné avec PHP pour réaliser un lien secondaire Voici un cas pratique, jetons un coup d'œil. .

Utilisez ajax pour obtenir des données de php

<!DOCTYPE html>
<html>
 <head>
 <title>Ajax案例一</title>
 <meta charset="utf-8" />
 </head>
 
 <body>
 <!-- 二级联动 -->
 <select id="province">
 <option>请选择</option>
 <option>山东省</option>
 <option>辽宁省</option>
 <option>吉林省</option>
 </select>
 <select id="city">
 <option>请选择</option>
 </select>
 <script>
 // 1. 为<select>元素绑定onchange事件
 var provinceEle = document.getElementById("province");
 provinceEle.onchange = function(){
 // 将id为city的元素内容清空
 var city = document.getElementById("city");
 var opts = city.getElementsByTagName("option");
 for(var z=opts.length-1;z>0;z--){
  city.removeChild(opts[z]);
 }
  
 // 2. 获取用户当前选择的省份名称
 var province = provinceEle.value;
 // 3. 创建对应的城市列表 - 数组
 var cities = [];
 switch (province){
  case "山东省":
  cities = ["青岛市","济南市","威海市","日照市","德州市"];
  break;
  case "吉林省":
  cities = ["长春市","松原市","吉林市","通化市","四平市"];
  break;
  case "辽宁省":
  cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
  break;
 }
 // 遍历城市列表
 for(var i=0;i<cities.length;i++){
  // 4. 创建<option>元素
  var option = document.createElement("option");
  // 5. 将城市的信息添加到<option>元素上
  var textNode = document.createTextNode(cities[i]);
  option.appendChild(textNode);
  // 6. 将创建的所有<option>元素添加到id为city元素上
  city.appendChild(option);
 }
  
 }
 </script>
 </body>
</html>

php :

<?php
 // 用于处理客户端请求二级联动的数据
 // 1. 接收客户端发送的省份信息
 $province = $_POST[&#39;provcince&#39;];
 // 2. 判断当前的省份信息,提供不同的城市信息
 switch ($province){
 case &#39;山东省&#39;:
  echo &#39;青岛市,济南市,威海市,日照市,德州市&#39;;
  break;
 case &#39;辽宁省&#39;:
  echo &#39;沈阳市,大连市,铁岭市,丹东市,锦州市&#39;;
  break;
 case &#39;吉林省&#39;:
  echo &#39;长春市,松原市,吉林市,通化市,四平市&#39;;
  break;
 }
 // 服务器端响应的是字符串
?>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez payer. attention pour des choses plus excitantes. Autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Utilisez ajax pour vérifier si le nom d'utilisateur enregistré existe

Formulaire d'opération Ajax pour télécharger des fichiers de manière asynchrone

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication graphique et textuelle détaillée des principes sous-jacents d'AJAXArticle suivant：Explication graphique et textuelle détaillée des principes sous-jacents d'AJAX

Articles Liés

Voir plus