Today, I made a dwr + jsp Example.
Web. xml:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Web-app version = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee"
Xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
Xsi: schemaLocation = "http://java.sun.com/xml/ns/j2ee
Http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd>
<Servlet>
<Servlet-name> dwr-invoker </servlet-name>
<Servlet-class>
Org. directwebremoting. servlet. DwrServlet
</Servlet-class>
<Init-param>
<Param-name> debug </param-name>
<Param-value> true </param-value>
</Init-param>
</Servlet>
<Servlet>
<Servlet-name> SelectServlet </servlet-name>
<Servlet-class> com. action. SelectServlet </servlet-class>
</Servlet>
<Servlet-mapping>
<Servlet-name> dwr-invoker </servlet-name>
<Url-pattern>/dwr/* </url-pattern>
</Servlet-mapping>
<Servlet-mapping>
<Servlet-name> SelectServlet </servlet-name>
<Url-pattern>/select </url-pattern>
</Servlet-mapping>
<Welcome-file-list>
<Welcome-file> index. jsp </welcome-file>
</Welcome-file-list>
</Web-app>
Dwr. xml:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE dwr PUBLIC "-// GetAhead Limited // DTD Direct Web Remoting
2.0 // EN "" http://www.getahead.ltd.uk/dwr/dwr20.dtd ">
<Dwr>
<! -- DWR cannot do anything without it -->
<Allow>
<Create creator = "new" javascript = "menu">
<Param name = "class" value = "com. dao. CountryDAO"/>
</Create>
<! -- Bean to be converted -->
<Convert converter = "bean" match = "com. vo. Country"/>
<Convert converter = "bean" match = "com. vo. Province"/>
<Convert converter = "bean" match = "com. vo. City"/>
</Allow>
</Dwr>
Test. jsp:Copy codeThe Code is as follows: <% @ page language = "java" import = "java. util. *, com. vo .*"
PageEncoding = "GBK" %>
<% @ Taglib uri = "http://java.sun.com/jstl/core" prefix = "c" %>
<Html>
<Head>
<Title> three levels of DWR Association </title>
<Script type = 'text/javascript'
Src = '/mutiplyMenu/dwr/interface/menu. js'> </script>
<Script type = 'text/javascript 'src = '/mutiplyMenu/dwr/engine. js'> </script>
<Script type = 'text/javascript 'src = '/mutiplyMenu/dwr/util. js'> </script>
</Head>
<Body>
<Script type = "text/javascript">
// Query the province or state based on the country id
Function queryProvince ()
{
Var countryId = $ ("country"). value;
// Not selected by default
If (countryId = 0)
{
$ {"Province"}. options. length = 0;
$ {"City"}. options. length = 0;
}
Else
{
Menu. queryProvinceById (countryId, provinceCallback );
}
}
// Query the callback function of the province or state based on the country id
Function provinceCallback (provinces)
{
$ {"Province"}. options. length = 0;
// The length of each two drop-down frames is cleared by 0 each time new data is obtained.
For (var I = 0; I <provinces. length; I ++ ){
Var value = provinces [I]. id;
Var text = provinces [I]. provinceName;
Var option = new Option (text, value );
// Create an option object based on the values marked by each set of values and text.
Try {
$ ("Province"). add (option); // add the option object to the second drop-down box
} Catch (e ){
}
}
// Associate Level 3 at the same time
Var provinceId =$ {"province"}. value;
Menu. queryCityById (provinceId, cityCallback );
}
// Query the city
Function queryCity ()
{
Var provinceId = $ ("province"). value;
Menu. queryCityById (provinceId, cityCallback );
}
// Query the callback function of the city
Function cityCallback (citys)
{
// The length of each three drop-down frames is cleared by 0 each time new data is obtained.
$ {"City"}. options. length = 0;
For (var I = 0; I <citys. length; I ++ ){
Var value = citys [I]. id;
Var text = citys [I]. cityName;
Var option = new Option (text, value );
// Create an option object based on the values marked by each set of values and text.
Try {
$ ("City"). add (option); // add the option object to the third drop-down list
} Catch (e ){
}
}
}
Function change1 ()
{
QueryProvince ();
}
Function change2 ()
{
QueryCity ();
}
</Script>
<Div align = "center">
<H3>
<Br>
</H3>
<H3>
Three-level interaction demonstration of DWR
</H3>
<! -- I am surprised that my <c> label cannot be used here -->
<Select id = "country" onchange = "change1 ();">
<Option selected = "selected" value = "0">
Select
</Option>
<%
@ SuppressWarnings ("unchecked ")
List list = (List) request. getAttribute ("countrys ");
For (int I = 0; I <list. size (); I ++)
{
Country temp = (Country) list. get (I );
%>
<Option value = "<% = temp. getId () %>"> <% = temp. getCountryName () %> </option>
<%
}
%>
</Select>
<Select id = "province" onchange = "change2 ();">
</Select>
<Select id = "city">
</Select>
</Div>
</Body>
</Html>
Servlet and dao will not be posted. If you want to know more, you can download the source code.
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
