DWR: Direct Web remoting is a convenient business method through JavaScript. I will show you how DWR is implemented using a three-level linkage drop-down box. The technologies I use include spring 2.0.5, dwr2.0.5, hibernate3.2.3.ga, and struts1.2.9. They mainly involve how DWR calls spring management business methods and how DWR processes returned data.
DWR Configuration:
<! -- Configure the DWR interceptor --> <br/> <servlet-Name> DWR-invoker </servlet-Name> <br/> <servlet-class> UK. ltd. getahead. DWR. dwrservlet </servlet-class> <br/> <init-param> <br/> <param-Name> debug </param-Name> <br/> <param-Value> true </param-value> <br/> </init-param> <br/> </servlet> <br/> <servlet-mapping> <br/> <servlet-Name> DWR-invoker </servlet-Name> <br/> <URL-pattern>/DWR/* </url-pattern> <br/> </servlet- mapping>
What I want to achieve is the drop-down of three levels of the region, city, county, and community, such as Handan, PiXian, and pearl community. The database table design is like this:
ID name PID
1 Handan 0
2 PiXian 1
3 Pearl community 2
.....
You can understand it at a glance.
So how to implement it? The first box shows the region. The data can be removed from the action or servlet, or DWR can be used. The second method is used.
HTML code:
<MCE: Script Type = "text/JavaScript"> <! -- </P> <p> function initcity () {<br/> var cityobj = document. getelementbyid ('city'); <br/> var areaobj = document. getelementbyid ('region'); <br/> var street = document. getelementbyid ('street '); <br/> cityobj. options [0] = New Option ('select ','-1'); <br/> areaobj. options [0] = New Option ('select ','-1'); <br/> Street. options [0] = New Option ('select ','-1'); <br/> cityservice. getbasecities (CB); <br/> function CB (cities) {<br/> for (VAR I = 0; I <cities. length; I ++) {<br/> cityobj. options [cityobj. options. length] = <br/> New Option (cities [I]. name, cities [I]. ID); <br/>}< br/>... <br/> // --> </MCE: SCRIPT> <br/> <body onload = "initcity ();"> <br/> city: <br/> <select id = city name = city onchange = "loadarea (this);"> </SELECT> <br/>...
Pay attention to cityservice. getbasecities (CB). This line of code cityservice is the JavaScript Object exposed by DWR and can be used to operate business methods. How is it set? In fact, cityservice is our business method. The Code is as follows:
Public interface icityservice {<br/>... <br/> public list getbasecities (); <br/>}</P> <p> public class cityserviceimpl implements icityservice {<br/> citydao; <br/>... <br/> public list getbasecities () {<br/> return citydao. getbasecities (); <br/>}< br/>}
So how can JavaScript call the getbasecities () method to fill in the first drop-down box?
Well, an important configuration file of DWR is staged.
DWR. xml
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <! Doctype DWR public "-// getahead limited // DTD direct Web remoting 2.0 //" http://getahead.org/dwr/dwr20.dtd "> <br/> <DWR> <br/> <allow> <br /> <create creator = "Spring" javascript = "cityservice"> <br/> <Param name = "beanname" value = "cityservice"/> <br/> </create> <br/> <convert converter = "Bean" match = "com. secondhand. hibernate. entity. ttarea "/> <br/> </allow> <br/> </DWR> <br/>
The create Attribute creator = "Spring" in the allow node indicates that the server code to be exposed is from spring. Beanname of param indicates the bean Based on the ID configured in the spring configuration file. Which bean does it use? Value = "cityservice", which is the bean of cityservice. Check the spring configuration file.
<Bean id = "cityservice" parent = "txproxytemplate"> <br/> <property name = "target"> <br/> <Bean class = "com. secondhand. service. impl. cityserviceimpl "> <br/> <property name =" citydao "> <br/> <ref bean =" ttareadao "/> <br/> </property> <br/> </bean> <br/> </property> <br/> </bean>
This bean has the getbasecities () method to be called.
How can JavaScript be called?
Open http: // localhost: 8080/project name/DWR
Click the exposed business class and copy the JS reference. The code in this example is as follows:
<SCRIPT type = 'text/JavaScript 'src = '/secondhandhib/DWR/interface/cityservice. js'> </SCRIPT> <br/> <SCRIPT type = 'text/JavaScript 'src ='/secondhandhib/DWR/engine. js'> </SCRIPT> <br/> <SCRIPT type = 'text/JavaScript 'src ='/secondhandhib/DWR/util. js'> </SCRIPT>
I can use the JavaScript code above.
I will post all the HTML code below:
<Link href = "CSS/main.css" type = text/CSS rel = stylesheet> <br/> <SCRIPT type = 'text/JavaScript 'src = '/secondhandhib/DWR/interface /cityservice. js'> </SCRIPT> <br/> <SCRIPT type = 'text/JavaScript 'src ='/secondhandhib/DWR/engine. js'> </SCRIPT> <br/> <SCRIPT type = 'text/JavaScript 'src ='/secondhandhib/DWR/util. js'> </SCRIPT> </P> <p> <meta content = "mshtml 6.00.2900.5726" name = generator> </P> <p> <SCRIPT type = "text/ javaScript "> <br/> function initcity () {<br/> var cityobj = document. getelementbyid ('city'); <br/> var areaobj = document. getelementbyid ('region'); <br/> var street = document. getelementbyid ('street '); <br/> cityobj. options [0] = New Option ('select ','-1'); <br/> areaobj. options [0] = New Option ('select ','-1'); <br/> Street. options [0] = New Option ('select ','-1'); <br/> cityservice. getbasecities (CB); <br/> function CB (cities) {<br/> for (VAR I = 0; I <cities. length; I ++) {<br/> cityobj. options [cityobj. options. length] = New Option (cities [I]. name, cities [I]. ID); <br/>}</P> <p >}< br/> function loadarea (OBJ) {<br/> var city = $ ("city "). value; <br/> var areaobj = document. getelementbyid ('region'); <br/> var street = document. getelementbyid ('street '); <br/> cityservice. getareabysuper (city, areacb); <br/> areaobj. length = 0; <br/> Street. length = 0; <br/> areaobj. options [0] = New Option ('select ','-1'); <br/> Street. options [0] = New Option ('select ','-1'); <br/> function areacb (areas) {<br/> for (VAR I = 0; I <areas. length; I ++) {<br/> areaobj. options [areaobj. options. length] = New Option (areas [I]. name, areas [I]. ID); <br/>}< br/> function loadarea1 (OBJ) {<br/> var area = $ ("area "). value; <br/> var street = document. getelementbyid ('street '); <br/> cityservice. getareabysuper (area, streetcb); <br/> Street. length = 0; <br/> Street. options [0] = New Option ('select ','-1'); <br/> function streetcb (streets) {<br/> for (VAR I = 0; I <streets. length; I ++) {<br/> Street. options [Street. options. length] = New Option (streets [I]. name, streets [I]. ID ); <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body onload =" initcity (); "> <br/>... <br/> <select id = city name = city onchange = "loadarea (this ); "> </SELECT> <br/> <select id = Area Name = Area onchange =" loadarea1 (this ); "> </SELECT> <br/> <select id = street name = Street> </SELECT> </P> <p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
