Php + js + ajax + mysql achieves provincial-municipal three-level linkage

Php + js + ajax + mysql achieves provincial-municipal three-level linkage

The effect is as follows:

Idea: first obtain the city or county of the selected province, convert the obtained data to a string in jason format and return it to the ajax client, use eval on the client to convert the string in jason format to an object, create each element value of the object as a text node, create an option node, and append the text node to the option node, append the option node to the select node.

Ajax-area-select.html

 Implement three-level linkage Using ajax + dom + php + mysl (provincial, municipal, and county)<Script src = "Scripts/ajaxUtil. js "language =" javascript "type =" text/javascript "> </script> <script language =" javascript "type =" text/javascript "> // defines the global variable objectId. sheng, shi, xian), and then call the select object to use var objectId = ""; // define the function to obtain the database's province data function getArea (id, objid) {objectId = objid; // clear the original option node before writing an option to the select node (delete this node, and there are simpler methods available in my other articles) var sel2 = document. getElementById (objid); var childS = sel2.childNodes; for (var I = childS. length-1; I> = 0; I --) {// alert (childS. length); sel2.removeChild (childS [I]);} // defines the url var url = "ajax-youku-server.php"; // defines the parameter var params = "id =" + id; // call ajax for interactive get (url, params, processData);} // process the data returned by the server and display function processData (xhr) {// convert the jason string returned by the server to the var obj = eval ("(" + xhr. responseText + ")"); // obtain the object var sel1 = document from the drop-down menu of the corresponding objectId (sheng, shi, xian) variable. getElementById (objectId); // create the option node var op1 = document. createElement ("option"); // Add the value attribute to option and assign the value to 0 op1.setAttribute ("value", 0); // create a text node text var text = document. createTextNode ("---- select ----"); // append the text node to op1 op1.appendChild (text); // append op1 to sel1 sel1.appendChild (op1 ); // The following table of the jason array object is id as the value of option, and the value of name in the following table is appended to for (var I = 0; I
 
  Save
  City
  County
 

AjaxUtil. js

Function get (url1, params, methodName ){/*!!!!!!!!!!!!!! This function is critical. This function includes the initialization object, request path, and other basic steps for ajax use: 1. initializing the ajax Engine 2. Encapsulating the url (setting the Request Path) 3. Open the ajax engine (synchronous and asynchronous; Use get or post for this transmission) 4. Send the request information to the server through the engine for processing. 5. Listen to the processing status that the server returns to the ajax engine. 6. Determine whether the interaction is complete, if the interaction is complete, retrieve the returned Number * // initialize the ajax engine var xhr = new XMLHttpRequest (); // This method is only applicable to IE browsers, and there are still problems with ie6. // Reorganize the URL value and pass the request path along with the obtained parameters. // this Math. random () prevents duplicate var url = url1 + "? "+ Params +" & r = "+ Math. random (); // alert (url); // open the engine xhr. open ("get", url, true); // readyState = 1 // send the request xhr. send (null); // readyState = 2 // listen for changes to the readyState value. Each change will execute the following function xhr. onreadystatechange = function () {// if it is 4, the interaction is complete. We can retrieve the content returned by the server if (xhr. readyState = 4) {// dynamic call method. Why is it dynamic? The method name is a variable methodName (xhr) ;}}// $ () method used to conveniently retrieve the function $ (id) of the id = "id" object) {return document. getElementById (id );}

Ajax-youku-server.php

Conn. php

Click the open link to download the linked SQL File