Java SSH Project Summary--ajax+json cascading menu

Objective

Front desk JSP The page needs to implement the cascade effect of the drop-down menu, implement the way title, adopt Ajax+json , share the implementation process.

Business

First look at the following:

Front desk

<tr><td> Registered Address <!--registeredaddresssection--></td><td><select class= "Combox" id= " Zhuceid "Name=" Zhuceid "onchange=" Getzhuceid () "><c:foreach var=" Dizhi "items=" ${dtdizhi} "><option id=" $ {dizhi.id} "<c:if test=" ${dizhi.id==zhuceid} ">selected=" selected "</c:if>value=" ${dizhi.id} ">${ dizhi.name}</option></c:foreach></select> <font color= "Red" >*</font></td> <td> </td><td><!--When the host address changes, this drop-down box is cascaded--><select class= "Combox" Name= " Registeredaddresstown "id=" Registeredaddresstown "></td></tr>

The code above is the code for two drop-down boxes, and the first drop-down box takes a Jstl will be in the background of the specific List address information is loaded and fires when the first drop-down box changes onchange= "Getzhuceid ()" Events

JS in Method

function Getzhuceid () {$ ("#registeredAddressTown"). empty ();//empty var Zhuceid = document.getElementById ("Zhuceid"). Value;var url = "public_qu2zhen.action?quid=" + zhuceid;$.ajax ({type: "POST", Url:url,data: {},datatype: "JSON", Succe Ss:function (data) {//data Returns the JSON information for the background for (Var n=0;n<data.length;n++) {   var ids=data[n].id;var names=data[n]. name;$ ("#registeredAddressTown"). Append ("<option id=" "+ids+" ' value= ' "+names+" > "+names+" </option> ") ;     }}})}

Getzhuceid by getting the current registered address ID , and then put the ID Upload Action class, and then go to the database to get all the addresses under that registered address, by JSON form for return, and then the JSON load into the second drop-down menu to achieve cascading effects.

Action Method

Registered Address: District-town public void Qu2zhen () {list<dictionary> dictionaries = new arraylist<dictionary> (); try {// 1.6 Registered address/operating address string quid = Request.getparameter ("quid"). Trim (); List Qu2zhen = testservice.findlistdictionaries (quid); Actioncontext.getcontext (). Put ("Qu2zhen", qu2zhen);d ictionaries = Objecttomodel (Qu2zhen);} catch (Exception e) {e.printstacktrace ();} String result = Jsonutils.tojson (dictionaries);//print the converted JsonSystem.out.println (result);//[{"id": "Name": "Donghua Gate Street" },{"id":},{, "name": "Jingshan Street", "id": "},{," "Name": "Intersection Street", "id": "The street of the Gate", "name": "The streets of Valium"},{"id": 76, "name": "Beixinqiao Street"},{"id": "Name": "East Four Streets"},{"id": "},{", "name": "Chaoyang Gate Street", "id": +, "name": "Jianguo Gate Street"},{"id": "line," "Name": "Dongzhimen Street"},{"id": "," "Name": " Li Ping Li Street "},{" id ": Bayi," name ":" Qianmen Street "},{" id ":" Chongwen, "" Name ":" Chongwenmen Street "},{" id ":" "," name ":" East Flower Market Street "},{" id ":", "" Long Tan Street "},{" ID ":", "name": "Stadium Road Street"},{"id": "", "Name": "Temple of Heaven Street"},{"id": "Yong Ding Men", "name": "Outside the street"}]outprint (response, result);}

The above code is relatively simple, in the method received from the front desk .ID, and then callServicemethod to get theIDunder the allListentity Collection, and then theListset Conversion toJSON, we will alsoJsonprinted out. Here'sJsontransformation is the last article, the expansion of the introduction of theListthe collection is transformed intoJSONthe method for the object.

Summary

This will take advantage Ajax +json The cascading effect of the drop-down menu is achieved. There are many ways of cascading implementations, but the principle is the same, mastering one, the others are mastered.

Java SSH Project Summary--ajax+json cascading menu