一、引言
專案經理分配給一個活，用ajax來實現一個功能。原來沒有接觸過ajax，只知道jquery提供了ajax的介面，而我對jquery還算比較熟悉，所以現在就想學一下用jquery來實現ajax的功能。
二、功能概述
ajax主要的功能就是“不重新整理頁面改變頁面內容”，或者就是“動態重新整理頁面”，反正我覺得就應該是胖用戶端之類的概念吧。反正現在的技術就是要讓IE功能越來越豐富，而且減少讓使用者等待重新整理頁面的機會，包括現在的actionScript都是這樣的概念吧。反正這是我自己的理解。
我要實現的功能很簡單，就是有一個下拉式清單，列表中有三種圖書的種類，選擇一條，就可以顯示該類圖書的詳細資料，而不需要重新整理頁面或者轉換頁面。
三、開始例子
1.資料庫表結構（mysql資料庫）
1）建表語句：
- 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）表中資料為：
1 computer 作業系統、java開發、資料庫技術 北京圖書印刷公司 100
2 ecnomic 宏觀經濟、微觀經濟、市場營銷 人民郵電出版社 200
3 life 浮沉 新華書店 300
2.jsp頁面為：
- <%@ 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>網路書城</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 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>主要圖書：<input id="mainBook" type="text" value=""/></td></tr>
- <tr><td>主要供應商：<input id="supplyCompany" type="text" value=""/></td></tr>
- <tr><td>本書店擁有該圖書數量：<input id="amount" type="text" value=""/></td></tr>
- </table>
- </form>
- </div>
-
- </body>
- </html>
3.action代碼
- 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層代碼：
- 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;
- }
- }
好了，這個功能就實現了。
