SetJquery-1.7.2.js In the webroot directoryIn the scripts folder (ScriptsIs a self-created folder)
Place dom4j-1.6.1.jar under webroot/WEB-INF/lib
1. Compile the servlet: xmlservlet
Package com. xuankai. servlet;
Import java. Io. ioexception;
Import java. Io. printwriter;
Import javax. servlet. servletexception;
Import javax. servlet. http. httpservlet;
Import javax. servlet. http. httpservletrequest;
Import javax. servlet. http. httpservletresponse;
Import org. dom4j. Document;
Import org. dom4j. documenthelper;
Import org. dom4j. element;
Import org. dom4j. Io. outputformat;
Import org. dom4j. Io. xmlwriter;
// The following line imports another person class, containing the ID, name, age, and address attributes, and generates their get and set methods. (Code omitted)
Import com. xuankai. model. person;
Public class xmlservlet extends httpservlet
{
@ Override
Protected void dopost (httpservletrequest req, httpservletresponse resp)
Throws servletexception, ioexception
{
String name = Req. getparameter ("name ");
Person = new person ();
If ("zhangsan". Equals (name ))
{
Person. setid (1 );
Person. setname ("zhangsan ");
Person. setage (20 );
Person. setaddress ("Beijing ");
}
Else
{
Person. setid (2 );
Person. setname ("Lisi ");
Person. setage (25 );
Person. setaddress ("Tianjing ");
}
// Use dom4j to create XML
Document document = incluenthelper. createdocument ();
Element rootelement = Document. addelement ("users ");
Rootelement. addcomment ("this is comment! ");
Element userelement = rootelement. addelement ("user ");
Element idelement = userelement. addelement ("ID ");
Element nameelement = userelement. addelement ("name ");
Element ageelement = userelement. addelement ("Age ");
Element addresselement = userelement. addelement ("Address ");
Idelement. settext (person. GETID () + "");
Nameelement. settext (person. getname ());
Ageelement. settext (person. getage () + "");
Addresselement. settext (person. getaddress ());
Resp. setcontenttype ("text/XML; charset = UTF-8 ");
Resp. setheader ("Pragma", "No-Cache ");
Resp. setheader ("cache-control", "No-Cache ");
Printwriter out = resp. getwriter ();
// Set the output format
Outputformat format = outputformat. createprettyprint ();
// Set the encoding format
Format. setencoding ("UTF-8 ");
Xmlwriter = new xmlwriter (Out, format );
Xmlwriter. Write (document );
Out. Flush ();
}
@ Override
Protected void doget (httpservletrequest req, httpservletresponse resp)
Throws servletexception, ioexception
{
This. dopost (req, resp );
}
}
2. Compile JSP: XML. jsp
<% @ Page Language = "Java" Import = "Java. util. *" pageencoding = "UTF-8" %>
<HTML>
<Head>
<Title> my JSP 'xml. jsp 'starting page </title>
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.7.2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Function (){
// Use method: $. Ajax () to do it !!
/*
$ ("# Button"). Click (function (){
$. Ajax ({
Type: "Post ",
URL: "xmlservlet ",
Datatype: "XML ",
Data: {Name: $ ("# name"). Val ()},
Success: function (returneddata ){
VaR id = $ (returneddata). Find ("ID"). Text ();
VaR name = $ (returneddata). Find ("name"). Text ();
VaR age = $ (returneddata). Find ("Age"). Text ();
VaR address = $ (returneddata). Find ("Address"). Text ();
VaR html = "<Table width = '000000' border = '1' align = 'center'> <tr> <TH> id </Th> <TH> name </Th> <TH> age </Th> <TH> address </Th> </tr> <TD> "+ ID +" </TD> <TD>" + name + "</TD> <TD>" + age + "</TD> <TD>" + address + "</TD> <tr> ";
$ ("# Body table: eq (0)"). Remove ();
$ ("# Body"). append (HTML );
}
});
});
*/
// Use method: $. Get () or $. Post () to do it !!
$ (Function (){
$ ("# Button"). Click (function (){
$. Get ("xmlservlet", {Name: $ ("# name"). Val ()},
Function (returneddata, status ){
VaR id = $ (returneddata). Find ("ID"). Text ();
VaR name = $ (returneddata). Find ("name"). Text ();
VaR age = $ (returneddata). Find ("Age"). Text ();
VaR address = $ (returneddata). Find ("Address"). Text ();
VaR html = "<Table width = '000000' border = '1' align = 'center'> <tr> <TH> id </Th> <TH> name </Th> <TH> age </Th> <TH> address </Th> </tr> <TD> "+ ID +" </TD> <TD>" + name + "</TD> <TD>" + age + "</TD> <TD>" + address + "</TD> <tr> ";
$ ("# Body table: eq (0)"). Remove ();
$ ("# Body"). append (HTML );
}
);
});
});
});
</SCRIPT>
</Head>
<Body id = "body">
<Select id = "name">
<Option value = "zhangsan"> zhangsan </option>
<Option value = "Lisi"> Lisi </option>
</SELECT>
<Input type = "button" value = "get content from server" id = "button">
</Body>
</Html>
The running result is:
The result of selecting zhangsan from the drop-down menu is:
When Lisi is selected from the drop-down menu, the result is: