The use of the Ajax drop-down list linkage.
Definition of Ajax:
AJAX is a technique for creating fast, Dynamic Web pages.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
An example of an Ajax effect:
When the area is empty, maintain the human condition:
Select a region after the situation: (choose Shucheng to bring out the maintenance staff Xiao Liu)
First, the original ecological JS implementation
XMLHttpRequest is the basis of AJAX
XMLHttpRequest Object
All modern browsers support XMLHttpRequest objects (IE5 and IE6 use ActiveXObject).
XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire page.
[JavaScript]View Plaincopy
- var xmlHttp;
- function Createxmlhttprequest () {
- if (window. ActiveXObject) {//check whether the browser supports XMLHttpRequest objects
- XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); Create is not supported
- }
- else if (window. XMLHttpRequest) {
- XmlHttp = new XMLHttpRequest (); Support for direct new
- }
- }//Create a XMLHTTP object
- function Ajaxrequest (url,data,responseresult) {//ajaxrequest is the function that sends the request to the background
- Createxmlhttprequest (); //Call to create a XMLHttpRequest object
- Xmlhttp.open ("POST", url,true); Specifies the type of request (POST), URL, and whether the request is processed asynchronously (yes)
- Xmlhttp.setrequestheader ("Content-type","application/x-www-form-urlencoded"); HTTP headers for POST data like HTML forms
- Xmlhttp.onreadystatechange = Responseresult; //Specifies the function to be executed when responding to the ready state in the onReadyStateChange event
- Xmlhttp.send (data); //Send data
- }
Area Select code for the foreground page:
[Java]View Plaincopy
- </td>
- <th> Regional:</th>
- <td>
- <select style="width:152px" name="Areaid" id= "areaid" class="Select_field"onchange= " Getwhmans (this.value) ">
- <option value="" Style="color: #999999" >-Please select-</option>
- <c:foreach items="${arealist}" var="area" >
- <option value="${area.id}" >${area.areaName}</option>
- </c:forEach>
- </select><font color="Red" >*</font>
- </td>
Front Maintenance Person Select page code:
[Java]View Plaincopy
- <th> Maintenance Personnel:</th>
- <td>
- <select id="Whman" style="width:152px" class="Select_field" name="Whman" >
- <option value="" Style="color: #999999" > Please select </option>
- </select><font color="Red" >*</font>
- </td>
Here are some of the code behind the scenes
[Java]View Plaincopy
- List<whperson> customers = Factorybo.getfugbo (). Getwhperson (area); //Based on the region to obtain the maintainer information for the area Select a drop-down box after the area linkage another drop-down box to bring out the maintainer information for the area
- if (Customers! = null) {
- Jsonarray Jsonarray = new Jsonarray (); New a JSON array
- For (Whperson whman:customers) {
- Jsonobject obj = new Jsonobject ();
- Obj.put ("id", Whman.getid ());
- Obj.put ("name", Whman.getname ());
- Jsonarray.add (obj); //Cycle new jsonobject and put the maintainer information in and add it to Josnarray.
- }
- Out.write (Jsonarray.tostring ()); //output is written to the page below the responsetext inside
- } Else {
- Out.write ("null");
- }
- Out.flush ();
- Out.close ();
[JavaScript]View Plaincopy
- function Responsecustomer () {//function executed after the background response is completed
- if (xmlhttp.readystate = = 4) {//4 indicates the request is complete and the response is ready
- if (Xmlhttp.status = =) {//means OK
- var Message=xmlhttp.responsetext; //text returned to the background
- if (message=="null") {//If no information is returned
- document.getElementById ("id"). options.length=1; Empty the Option drop-down box for id= ' id '
- return false;
- }
- var Info2 = eval (message); //Parse JSON string
- document.getElementById ("Whman"). Options.length=1; Set theoption drop-down box for id= ' ID ' to empty first
- $.each (Info2, function (i,n) {
- document.getElementById ("Whman"). Options.add (new Option (N.gridname,n.gridid)); Add a drop-down box option to the drop-down box, option plus the value returned in the background
- });
- }
- }
- }
- Function Getgridbyareaid (val) {///self-written functions another option onchange event-triggered function to select this option after you want the option level to be linked
- var url="Village.do?method=getgridbyareaid"; URL to request background
- var data="id=" +val.value; Parameters passed into the background
- Ajaxrequest (Url,data,responsecustomer); //Real Ajax functions to invoke
- }
Second, the implementation of Jquery Ajax
[JavaScript]View Plaincopy
- function Getwhmans (obj) {
- var url="Bbtj.do?method=getwhman"; URL to request background
- $ ("#whman"). empty (); //Pre-empty
- $ ("#whman"). Append ($ (' <option value= "" >-Please select-</option> ')); Plus--Please select--Options
- if ($ (obj). val () = ="")
- Return //No value, return
- url+="&areaid=" +$ (obj). val (); URL Parameters
- url+="&t=" + (new Date ()). ValueOf (); URL parameters
- $.ajax ({
- Url:url,
- Type:' POST ',//post mode
- DataType:' text ',//Return text type
- Beforesend:function (xmlhttprequest,status) {
- },
- Success:function (data,status) {
- var d=eval (data); //parsing
- $ (d). each (function (index,entity) {
- $ ("#whman"). Append ($ (' <option value= "' +entity[' id ']+'" > ' +entity['name ']+' </ Option> ')); //Background Data add to drop-down box
- });
- },
- Complete:function (xmlhttprequest,status) {
- },
- Error:function () {
- }
- });
- }
JAVA EE Project Common knowledge of Ajax technology to implement the Select drop-down list linkage two uses (let you really understand Ajax)