使用jQuery实现简单ajax的演示代码
作者：mobiledu2402851377 | 2021-08-08 04:42
一、引言项目经理分配给一个活，用ajax来实现一个功能。原来没有接触过ajax，只知道jquery提供了ajax的接口，而我对jquery还算比较熟悉，所以现在就想学一下用jquery来实现ajax的功能。二、功能概述ajax主要的功能就是“不刷新页面改变页面内容”，或者就
一、引言
项目经理分配给一个活，用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(); %>
/etc/css/common.css" rel="stylesheet" type="text/css">
/etc/js/jquery.js">
网络书城
function setValue(){
$('#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);
}
);
}
请选择图书种类:
${catlogname}
|
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;
}
}
好了，这个功能就实现了。
京公网安备 11010802040832号 | 京ICP备19059560号-6