Ajax Implementation of City Two-Level Linkage (Part 2)

The previous article联动 only used Ajax request to get and render cities, here both provinces are also used for Ajax request and rendering

1, HTML

<select id="province">
 <option>Select</option>
 </select>
 <select id="city">
 <option>Select</option>
 </select>

2, JS

/*
 * Both province and city information are sourced from the server side
 * * First approach - Based on the previous case
 * * Retrieve province information using one Ajax asynchronous request
 * * According to province information, use Ajax asynchronous request again
 * * Second approach - Rethink
 * * Retrieve provinces and cities at once
 */
 // a. Create XMLHttpRequest object
 var xhr = getXhr();
 // First approach - Based on the previous case
 // 1. When the page is loaded, implement Ajax asynchronous request - Province information
 window.onload = function(){
 // b. Establish connection - open("get","07_province.php");
 xhr.open("get","07_province.php");
 // c. Send request - send(null)
 xhr.send(null);
 // d. Receive data from the server
 xhr.onreadystatechange = function(){
  if(xhr.readyState==4&&xhr.status==200){
  var data = xhr.responseText;
  // Convert the string to an array
  var provinces = data.split(",");
  // Traverse the array
  for(var i=0;i<provinces.length;i++{
   // Create an option element and add it to the element with id 'province'
   var option = document.createElement("option");
   var text = document.createTextNode(provinces[i]);
   option.appendChild(text);
   var province = document.getElementById("province");
   province.appendChild(option);
  }
  }
 }
 };
 // 2When the user selects the province information, implement an asynchronous request using Ajax - City Information
 var province = document.getElementById("province");
 province.onchange = function(){
 // Clear
 var city = document.getElementById("city");
 var opts = city.getElementsByTagName("option");
 for(var z=opts.length-1;z>0;z--{
  city.removeChild(opts[z]);
 }
 if(province.value != "请选择"){
  xhr.open("post","07_cities.php");
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xhr.send("province="+province.value);
  xhr.onreadystatechange = function(){
  if(xhr.readyState==4&&xhr.status==200){
   var data = xhr.responseText;
   var cities = data.split(",");
   for(var i=0;i<cities.length;i++{
   var option = document.createElement("option");
   var text = document.createTextNode(cities[i]);
   option.appendChild(text);
   city.appendChild(option);
   }
  }
  }
 }
 };
 //Define the function to get the core object of Ajax
 function getXhr(){
 var xhr = null;
 if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
 }
  xhr = new ActiveXObject("Microsoft.XMLHttp");
 }
 return xhr;
 }

3、province.php

<?php
 echo 'Shandong Province, Liaoning Province, Jilin Province';
?>

cities.pnp

<?php
 // Used to process the data of the client's secondary联动 request
 // 1. Receive the province information sent by the client
 $province = $_POST['province'];
 // 2. Determine the current province information and provide different city information
 switch ($province){
 case 'Shandong Province':
  echo 'Qingdao City, Jinan City, Weihai City, Rizhao City, Dezhou City';
  break;
 case 'Liaoning Province':
  echo 'Shenyang City, Dalian City, Tieling City, Dandong City, Jinzhou City';
  break;
 case 'Jilin Province':
  echo 'Changchun City, Songyuan City, Jilin City, Tonghua City, Siping City';
  break;
 }
 // The server responds with a string
?>

That's all for this article. Hope it will be helpful to everyone's learning, and also hope everyone will support the Shouting Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete any infringing content.)