Resources: Use Ajax pages (send and respond), one processing server page, and one reusable net. js.
1. html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Title> 1.html </title>
<SCRIPT type = "text/JavaScript" src = "net. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Function fillterritory (oelem, otarget) {// This function starts the Ajax request
VaR strvalue = oelem. Options [
Oelem. selectedindex]. value; // obtain the value from the selection list.
VaR url = & apos; doublecomboxml. jsp & apos; // set the target URL
VaR strparams = & apos; q = & apos; + strvalue +
"& F =" + otarget. Form. Name +
"& E =" + otarget. Name; // create a parameter string
VaR loader1 = new
Net. contentloader (URL, filldropdown, null,
"Post", strparams); // start the content Loader
}
Function filldropdown () {// use the data update page from the XML response
VaR xmldoc = this.req.responsexml.doc umentelement;
VaR xsel = xmldoc.
Getelementsbytagname (& apos; selectelement & apos;) [0];
VaR strfname = xsel.
Childnodes [0]. firstchild. nodevalue;
VaR strename = xsel.
Childnodes [1]. firstchild. nodevalue;
VaR objddl = Document. Forms [strfname].
Elements [strename];
Objddl. Options. Length = 0;
VaR xrows = xmldoc.
Getelementsbytagname (& apos; Entry & apos ;);
For (I = 0; I <xrows. length; I ++ ){
VaR thetext = xrows [I].
Childnodes [0]. firstchild. nodevalue;
VaR thevalue = xrows [I].
Childnodes [1]. firstchild. nodevalue;
VaR option = New Option (thetext,
Thevalue );
Objddl. Options. Add (option,
Objddl. Options. Length );
}
}
</SCRIPT>
</Head>
<Body>
<Form name = "form1">
<Select name = "ddlregion" onchange = "fillterritory (this, document. form1.ddlterritory)">
<Option value = "-1"> pick a region </option>
<Option value = "1"> Eastern </option>
<Option value = "2"> Western </option>
<Option value = "3"> Northern </option>
<Option value = "4"> Southern </option>
</SELECT>
<Select name = "ddlterritory"> </SELECT>
</Form>
</Body>
</Html>
Doublecomboxml. XML (defines the XML response format and can be deleted after use)
<? XML version = "1.0"?>
<Selectchoice>
<Selectelement>
<Formname> form1 </formname>
<Formelem> ddlterritory </formelem>
</Selectelement>
<Entry>
<Optiontext> select a Territory </optiontext>
<Optionvalue>-1 </optionvalue>
</Entry>
<Entry>
<Optiontext> territorydescription </optiontext>
<Optionvalue> territoryid </optionvalue>
</Entry>
</Selectchoice>
Doublecomboxml. jsp
<% @ Page Language = "Java" Import = "Java. util. *, java. SQL. *, java. Io. *" pageencoding = "gb2312" %>
<%
String Path = request. getcontextpath ();
String basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/";
%>
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Base href = "<% = basepath %>">
<Title> my JSP & apos; doublecomboxml. jsp & apos; starting page </title>
<Meta http-equiv = "Pragma" content = "no-Cache">
<Meta http-equiv = "cache-control" content = "no-Cache">
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "Description" content = "this is my page">
<! --
<LINK rel = "stylesheet" type = "text/CSS" href = "styles.css">
-->
</Head>
<Body>
<%
String strform = request. getparameter ("F ");
String strelem = request. getparameter ("e ");
String strquery = request. getparameter ("Q ");
Class. forname ("com. MySQL. JDBC. Driver"). newinstance ();
String url = "JDBC: mysql: // localhost/demo? User = root & Password = ";
Connection conn = drivermanager. getconnection (URL );
Statement stmt = conn. createstatement (resultset. type_scroll_sensitive, resultset. concur_updatable );
String SQL = "select * From tb_area where Father =" + strquery;
Resultset rs1_stmt.exe cutequery (SQL );
// The following uses the defined XML format to output the XML document.
Stringbuilder strxml = new stringbuilder ("<? XML version = & apos; 1.0 & apos;?> ");
Strxml. append ("<selectchoice> ");
Strxml. append ("<selectelement> ");
Strxml. append ("<formname>" + strform + "</formname> ");
Strxml. append ("<formelem>" + strelem + "</formelem> ");
Strxml. append ("</selectelement> ");
If (Rs. Next ())
{
Strxml. append ("<entry> ");
Strxml. append ("<optiontext> select a Territory </optiontext> ");
Strxml. append ("<optionvalue>-1 </optionvalue> ");
Strxml. append ("</entry> ");
Rs. beforefirst ();
While (Rs. Next ())
{
Strxml. append ("<entry> ");
Strxml. append ("<optiontext>" + Rs. getstring (2) + "</optiontext> ");
Strxml. append ("<optionvalue>" + Rs. getstring (1) + "</optionvalue> ");
Strxml. append ("</entry> ");
}
}
Strxml. append ("</selectchoice> ");
Response. setcontenttype ("text/XML"); // note that this sentence is very important.
Printwriter out2 = response. getwriter (); // note that this sentence is very important.
Out2.write (strxml. tostring (); // out. Write (); to return the XML document
Out2.close ();
%>
</Body>
</Html>
Net. js
/*
URL-loading object and a request queue built on top of it
*/
/* Namespacing object */
VaR net = new object ();
Net. ready_state_uninitialized = 0;
Net. ready_state_loading = 1;
Net. ready_state_loaded = 2;
Net. ready_state_interactive = 3;
Net. ready_state_complete = 4;
/* --- Content loader object for cross-browser requests ---*/
Net. contentloader = function (URL, onload, onerror, method, Params, contenttype ){
This. Req = NULL;
This. onload = onload;
This. onerror = (onerror )? Onerror: This. defaulterror;
This. loadxmldoc (URL, method, Params, contenttype );
}
Net. contentloader. Prototype. loadxmldoc = function (URL, method, Params, contenttype ){
If (! Method ){
Method = "get ";
}
If (! Contenttype & Method = "Post "){
Contenttype = & apos; application/X-WWW-form-urlencoded & apos ;;
}
If (window. XMLHttpRequest ){
This. Req = new XMLHttpRequest ();
} Else if (window. activexobject ){
This. Req = new activexobject ("Microsoft. XMLHTTP ");
}
If (this. req ){
Try {
VaR loader = this;
This. Req. onreadystatechange = function (){
Net. contentloader. onreadystate. Call (loader );
}
This. Req. Open (method, URL, true );
If (contenttype ){
This. Req. setRequestHeader (& apos; Content-Type & apos;, contenttype );
}
This. Req. Send (Params );
} Catch (ERR ){
This. onerror. Call (this );
}
}
}
Net. contentloader. onreadystate = function (){
VaR Req = This. req;
VaR ready = Req. readystate;
If (ready = net. ready_state_complete ){
VaR httpstatus = Req. status;
If (httpstatus = 200 | httpstatus = 0 ){
This. onload. Call (this );
} Else {
This. onerror. Call (this );
}
}
}
Net. contentloader. Prototype. defaulterror = function (){
Alert ("error fetching data! "
+ "/N/nreadystate:" + this. Req. readystate
+ "/Nstatus:" + this. Req. Status
+ "/Nheaders:" + this. Req. getAllResponseHeaders ());
}
Attachment: csdn space/ajaxdynamic dual-combination .txt
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
