I. Introduction
The Project Manager assigns a job to implement a function using Ajax. I have never touched Ajax before. I only know that jquery provides Ajax interfaces, but I am still familiar with jquery. So now I want to learn how to use jquery to implement Ajax functions.
Ii. Function Overview
The main function of AJAX is to "change the page content without refreshing a new page" or "dynamically refresh the page". I think it should be a concept like a fat client. The current technology is to enrich ie functions and reduce the chance for users to wait for page refresh, including the concept of ActionScript. This is my understanding.
The function I want to implement is very simple, that is, there is a drop-down list, there are three types of books in the list, select one, you can display the details of this type of books, you do not need to refresh the page or convert the page.
Iii. Example
1. database table structure (MySQL database)
1) Table creation statement:
- Create
- Table catlog
- (
- Catlogid int (11) not null auto_increment,
- Catlogname varchar (20) not null,
- Mainbook text,
- Supplycompany text,
- Amount int (11 ),
- Primary key using btree (catlogid)
- )
- Engine = InnoDB default charset = utf8
2) The data in the table is:
1 computer operating system, Java Development, database technology Beijing book printing company 100
2 ecnomic macro-economy, micro-economy, marketing, people's post and telecommunications press 200
3 Life Fu shen Xinhua Bookstore 300
2. the JSP page is:
- <% @ Page Language = "Java" contenttype = "text/html; charset = UTF-8" pageencoding = "UTF-8" %>
- <% @ Taglib prefix = "ww" uri = "/webwork" %>
- <% String webapp = request. getcontextpath (); %>
- <HTML>
- <Head>
- <Link href = "<% = webapp %>/etc/CSS/common.css" rel = "stylesheet" type = "text/CSS">
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
- <Script language = "JavaScript" src = "<% = webapp %>/etc/JS/jquery. js"> </SCRIPT>
- <Title> online bookstore </title>
- <SCRIPT type = "text/JavaScript">
- Function setvalue (){
- // Document. getelementbyid ("detail"). Style = "visibility: visible ;"
- $ ('# List'). Show ();
- $ ('# Mainbook'). ATTR ("value", "$ {catalog. mainbook }");
- $ ('# Supplycompany'). ATTR ("value", "$ {catalog. supplycompany }");
- $ ('# Amount'). ATTR ("value", "$ {catalog. Amount }");
- }
- Function viewdetail (name ){
- $. Getjson (
- "Getcataloginfo. Action ",
- {Catalogname: name },
- Function (MSG ){
- $ ('# Mainbook'). ATTR ("value", MSG. mainbook );
- $ ('# Supplycompany'). ATTR ("value", MSG. supplycompany );
- $ ('# Amount'). ATTR ("value", MSG. amount );
- }
- );
- }
- </SCRIPT>
- </Head>
- <Body>
- <Div id = "ajax" class = "list" style = "display: Block">
- <Form ID = "frm" Action = "getcataloginfo. Action">
- <Table>
- <Tr>
- <TD> select a book type:
- <Select onchange = "viewdetail (this [selectedindex]. Text)">
- <WW: iterator id = "cataloglist" value = "cataloglist">
- <Option value = "$ {catlogname}" >$ {catlogname} </option>
- </WW: iterator>
- </SELECT>
- </TD>
- </Tr>
- </Table>
- <Table>
- <Tr> <TD> main books: <input id = "mainbook" type = "text" value = ""/> </TD> </tr>
- <Tr> <TD> major suppliers: <input id = "supplycompany" type = "text" value = ""/> </TD> </tr>
- <Tr> <TD> Number of Books owned by this bookstore: <input id = "amount" type = "text" value = ""/> </TD> </tr>
- </Table>
- </Form>
- </Div>
- </Body>
- </Html>
3. Action Code
- Public String getcataloginfo (){
- Catalog = icatalogservice. getcatlogbyname (catalogname );
- Jsonobject JSON = new jsonobject ();
- Try {
- JSON. Put ("mainbook", catalog. getmainbook ());
- JSON. Put ("supplycompany", catalog. getsupplycompany ());
- JSON. Put ("amount", catalog. getamount ());
- } Catch (jsonexception e ){
- E. printstacktrace ();
- Return Error;
- }
- Catalogname = JSON. tostring ();
- Return success;
- }
4. Service Layer Code:
- Public catlog getcatlogbyname (string name ){
- Return icatalogdao. getcatlog (name );
- }
5. pojo
- Package CN. resoft. cm. VO;
- Import java. util. hashset;
- Import java. util. Set;
- Public class catlog implements java. Io. serializable {
- Private integer catlogid;
- Private string catlogname;
- Private string mainbook;
- Private string supplycompany;
- Private integer amount;
- Private set books = new hashset (0 );
- Public catlog (){
- }
- Public catlog (string catlogname ){
- This. catlogname = catlogname;
- }
- Public catlog (string catlogname, set books ){
- This. catlogname = catlogname;
- This. Books = books;
- }
- Public integer getcatlogid (){
- Return this. catlogid;
- }
- Public void setcatlogid (integer catlogid ){
- This. catlogid = catlogid;
- }
- Public String getcatlogname (){
- Return this. catlogname;
- }
- Public void setcatlogname (string catlogname ){
- This. catlogname = catlogname;
- }
- Public set getbooks (){
- Return this. books;
- }
- Public void setbooks (set books ){
- This. Books = books;
- }
- Public String getmainbook (){
- Return mainbook;
- }
- Public void setmainbook (string mainbook ){
- This. mainbook = mainbook;
- }
- Public String getsupplycompany (){
- Return supplycompany;
- }
- Public void setsupplycompany (string supplycompany ){
- This. supplycompany = supplycompany;
- }
- Public integer getamount (){
- Return amount;
- }
- Public void setamount (integer amount ){
- This. Amount = amount;
- }
- }
Well, this function is implemented.
