JAVA EE Project Common knowledge of Ajax technology to implement the Select drop-down list linkage two uses (let you really understand Ajax)

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

2. var xmlHttp;
6. function Createxmlhttprequest () {
8. if (window. ActiveXObject) {//check whether the browser supports XMLHttpRequest objects
10. XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); Create is not supported
12. }
14. else if (window. XMLHttpRequest) {
16. XmlHttp = new XMLHttpRequest (); Support for direct new
18. }
20. }//Create a XMLHTTP object
22. function Ajaxrequest (url,data,responseresult) {//ajaxrequest is the function that sends the request to the background
24. Createxmlhttprequest (); //Call to create a XMLHttpRequest object
26. Xmlhttp.open ("POST", url,true); Specifies the type of request (POST), URL, and whether the request is processed asynchronously (yes)
28. Xmlhttp.setrequestheader ("Content-type","application/x-www-form-urlencoded"); HTTP headers for POST data like HTML forms
30. Xmlhttp.onreadystatechange = Responseresult; //Specifies the function to be executed when responding to the ready state in the onReadyStateChange event
32. Xmlhttp.send (data); //Send data
36. }

Area Select code for the foreground page:

[Java]View Plaincopy

2. </td>
4. <th> Regional:</th>
6. <td>
8. <select style="width:152px" name="Areaid" id= "areaid" class="Select_field"onchange= " Getwhmans (this.value) ">
10. <option value="" Style="color: #999999" >-Please select-</option>
12. <c:foreach items="${arealist}" var="area" >
14. <option value="${area.id}" >${area.areaName}</option>
16. </c:forEach>
18. </select><font color="Red" >*</font>
20. </td>

Front Maintenance Person Select page code:

[Java]View Plaincopy

2. <th> Maintenance Personnel:</th>
4. <td>
8. <select id="Whman" style="width:152px" class="Select_field" name="Whman" >
10. <option value="" Style="color: #999999" > Please select </option>
14. </select><font color="Red" >*</font>
18. </td>

Here are some of the code behind the scenes

[Java]View Plaincopy

2. 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
4. if (Customers! = null) {
6. Jsonarray Jsonarray = new Jsonarray (); New a JSON array
8. For (Whperson whman:customers) {
10. Jsonobject obj = new Jsonobject ();
12. Obj.put ("id", Whman.getid ());
14. Obj.put ("name", Whman.getname ());
16. Jsonarray.add (obj); //Cycle new jsonobject and put the maintainer information in and add it to Josnarray.
18. }
20. Out.write (Jsonarray.tostring ()); //output is written to the page below the responsetext inside
22. } Else {
24. Out.write ("null");
26. }
28. Out.flush ();
30. Out.close ();

[JavaScript]View Plaincopy

2. function Responsecustomer () {//function executed after the background response is completed
4. if (xmlhttp.readystate = = 4) {//4 indicates the request is complete and the response is ready
6. if (Xmlhttp.status = =) {//means OK
8. var Message=xmlhttp.responsetext; //text returned to the background
10. if (message=="null") {//If no information is returned
12. document.getElementById ("id"). options.length=1; Empty the Option drop-down box for id= ' id '
14. return false;
16. }
18. var Info2 = eval (message); //Parse JSON string
20. document.getElementById ("Whman"). Options.length=1; Set theoption drop-down box for id= ' ID ' to empty first
22. $.each (Info2, function (i,n) {
24. 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
26. });
28. }
30. }
32. }
34. 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
36. var url="Village.do?method=getgridbyareaid"; URL to request background
38. var data="id=" +val.value; Parameters passed into the background
40. Ajaxrequest (Url,data,responsecustomer); //Real Ajax functions to invoke
44. }

Second, the implementation of Jquery Ajax

[JavaScript]View Plaincopy

2. function Getwhmans (obj) {
4. var url="Bbtj.do?method=getwhman"; URL to request background
6. $ ("#whman"). empty (); //Pre-empty
8. $ ("#whman"). Append ($ (' <option value= "" >-Please select-</option> ')); Plus--Please select--Options
10. if ($ (obj). val () = ="")
12. Return //No value, return
14. url+="&areaid=" +$ (obj). val (); URL Parameters
16. url+="&t=" + (new Date ()). ValueOf (); URL parameters
20. $.ajax ({
22. Url:url,
24. Type:' POST ',//post mode
26. DataType:' text ',//Return text type
28. Beforesend:function (xmlhttprequest,status) {
32. },
34. Success:function (data,status) {
36. var d=eval (data); //parsing
38. $ (d). each (function (index,entity) {
40. $ ("#whman"). Append ($ (' <option value= "' +entity[' id ']+'" > ' +entity['name ']+' </ Option> ')); //Background Data add to drop-down box
42. });
44. },
46. Complete:function (xmlhttprequest,status) {
50. },
52. Error:function () {
56. }
58. });
62. }

JAVA EE Project Common knowledge of Ajax technology to implement the Select drop-down list linkage two uses (let you really understand Ajax)