本篇内容详细讲解了如何利用jQuery的$.post, $.get, $.ajax方法进行AJAX操作，并结合HTML、MySQL数据库和Servlet技术，实现了在同一页面上的学校资料增删改查和分页显示功能。文中还介绍了相关Java后台代码和前端页面设计。"
71124512,1320959,Netty入门：构建Maven多模块Echo Server & Client,"['Netty', '网络编程', 'Java', '服务器开发', '客户端开发']
本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。
基础环境要求
| 序号 | 资源 | 描述 |
| 1 | 需下载jQuery插件 | ajax技术基础 |
| 2 | 需安装MySQL数据库及驱动程序 | 驱动程序 |
| 3 | fastjson.jar | JSON数据格式支持 |
| 4 | jsp项目支持基础jar包 | jsp开发环境 |
| 5 | tomcat8.5 | jsp运行环境 |
数据表结构
CREATE TABLE `college` ( `collegeId` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键', `collegeName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '学校名称', `collegeAddr` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '学校地址', `pic` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '学校图片', `contact` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '联系人', `tel` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '电话', `remark` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '说明', PRIMARY KEY (`collegeId`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '学校表' ROW_FORMAT = Dynamic;
CollegeVo.java
package com.bean;
import java.io.Serializable;
public class CollegeVo implements Serializable {
private int collegeId;
private String collegeName;
private String pic;
private String collegeAddr;
private String contact;
private String tel;
private String remark;
public int getCollegeId() {
return collegeId;
}
public void setCollegeId(int collegeId) {
this.collegeId = collegeId;
}
public String getCollegeName() {
return collegeName;
}
public void setCollegeName(String collegeName) {
this.collegeName = collegeName;
}
public String getPic() {
return pic;
}
public void setPic(String pic) {
this.pic = pic;
}
public String getCollegeAddr() {
return collegeAddr;
}
public void setCollegeAddr(String collegeAddr) {
this.collegeAddr = collegeAddr;
}
public String getContact() {
return contact;
}
public void setContact(String contact) {
this.contact = contact;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
}
数据库连接类（DBConn.java）
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
/*
* MySQL数据库的连接类
* */
public class DBConn {
/*
驱动
mysql-connector-java-5.1.48.jar(支持mysql5.7,8.0等版本,字符集utf-8)
*/
//必须导入mysql-connector-java-5.1.48.jar，才能找到com.mysql.jdbc.Driver驱动类
static String driver="com.mysql.jdbc.Driver";
//连接字符串,localhost(127.0.0.1)表示本机,3306是MySQL的默认端口,qq是数据库名称
static String url= "jdbc:mysql://localhost:3306/practice?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false&allowPublicKeyRetrieval=true";
//登录名称
static String username = "root";
//登录密码
static String password = "1234";
//静态变量
static Connection conn;
//静态代码块，程序启动不需要调用该代码，系统会自动执行,并且只会执行一次
static {
try {
//1.加载驱动
Class.forName(driver);
//2.创建连接,执行该语句，如果没有异常出现，则数据库连接成功
conn = DriverManager.getConnection(url, username, password);
}catch (Exception ex){
ex.printStackTrace();
}
}
//创建连接的函数
public static Connection open(){
try {
//如果conn没有连接到数据库，或者说断开了与数据库连接，则重新连接一次
if (conn == null || conn.isClosed()) {
//如果断开了与数据库的连接，再重新建立连接
conn = DriverManager.getConnection(url,username,password);
}else{
return conn; //如果正常连接，直接返回
}
}catch (Exception e){
e.printStackTrace();
}
return conn;
}
//关闭连接
public static void close(){
try{
if(conn != null || !conn.isClosed()){
conn.close();
}
}catch (Exception e){
e.printStackTrace();
}
}
}
数据库操作类（CollegeDAO.java）
package com.dao;
import com.bean.CollegeVo;
import com.bean.PageObject;
import com.bean.ProvinceVo;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class CollegeDAO {
//新增学校
public boolean add(CollegeVo t) {
try {
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "insert into college(collegeName,contact,tel,collegeAddr,remark,pic) values('";
sql += t.getCollegeName() + "','";
sql += t.getContact() + "','";
sql += t.getTel() + "','";
sql += t.getCollegeAddr() + "','";
sql += t.getRemark() + "','')";
System.out.println("sql=" + sql);
//保存数据到teacher表中
stmt.executeUpdate(sql);
return true;
}catch (Exception e){
e.printStackTrace();
return false;
}
}
//修改学校
public boolean edit(CollegeVo t) {
try {
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "update college set ";
sql += " collegeName= '"+t.getCollegeName() + "',";
sql += " contact='" + t.getContact() + "',";
sql += " tel='" + t.getTel() + "',";
sql += " collegeAddr='" + t.getCollegeAddr() + "',";
sql += " remark='"+ t.getRemark() + "',pic='' where collegeId=" + t.getCollegeId();
System.out.println("sql=" + sql);
//保存数据到teacher表中
stmt.executeUpdate(sql);
return true;
}catch (Exception e){
e.printStackTrace();
return false;
}
}
//删除学校
public boolean del(String collegeId) {
try {
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "delete from college where collegeId=" + collegeId;
System.out.println("sql=" + sql);
//保存数据到teacher表中
stmt.executeUpdate(sql);
return true;
}catch (Exception e){
e.printStackTrace();
return false;
}
}
public List<CollegeVo> getList(PageObject pager){
List<CollegeVo> collegeList = new ArrayList<CollegeVo>();
try{
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "select * from college limit " + pager.getStartIndex() + "," + pager.perCount;
ResultSet rs = stmt.executeQuery(sql);
while(rs.next()){
CollegeVo c = new CollegeVo();
c.setCollegeId(rs.getInt("collegeId"));
c.setCollegeName(rs.getString("collegeName"));
c.setContact(rs.getString("contact"));
c.setTel(rs.getString("tel"));
c.setCollegeAddr(rs.getString("collegeAddr"));
c.setRemark(rs.getString("remark"));
c.setPic(rs.getString("pic"));
collegeList.add(c);
}
}catch (Exception e){
e.printStackTrace();
}
return collegeList;
}
public CollegeVo getById(String collegeId){
CollegeVo c = new CollegeVo();
try{
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "select * from college where collegeId=" + collegeId;
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
c.setCollegeId(rs.getInt("collegeId"));
c.setCollegeName(rs.getString("collegeName"));
c.setContact(rs.getString("contact"));
c.setTel(rs.getString("tel"));
c.setCollegeAddr(rs.getString("collegeAddr"));
c.setRemark(rs.getString("remark"));
c.setPic(rs.getString("pic"));
}
}catch (Exception e){
e.printStackTrace();
}
return c;
}
public int getCount(){
int cnt = 0;
try{
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select count(*) cnt from college");
if(rs.next()){
cnt = rs.getInt("cnt");
}
}catch (Exception e){
e.printStackTrace();
}
return cnt;
}
//实现省市县三级联动
/*
* - 查询所有的省
select * from province where id like '__0000';
-- 查询江西省所有市
select * from province where id like '36__00' and id !='360000';
-- 查询赣州市所有的区县
select * from province where id like '3602__' and id !='360200';
* */
public List<ProvinceVo> getCity(int type,String id){
List<ProvinceVo> provList = new ArrayList<ProvinceVo>();
try{
Connection conn = DBConn.open();
Statement stmt = conn.createStatement();
String sql = "";
switch (type){
case 1: //查询省
sql = "select * from province where id like '__0000'";
break;
case 2: //查询市
sql = "select * from province where id like '"+ id+"__00' and id !='"+id+"0000'";
break;
case 3: //查询区县
sql = "select * from province where id like '"+id+"__' and id !='"+id+"00'";
break;
}
ResultSet rs = stmt.executeQuery(sql);
while(rs.next()){
ProvinceVo p = new ProvinceVo();
p.setId(rs.getString("id"));
p.setName(rs.getString("name"));
provList.add(p);
}
}catch (Exception e){
e.printStackTrace();
}
return provList;
}
}
分页对象（PageObject.java）
package com.bean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
//分页类
public class PageObject implements Serializable {
//存放列表数据
private List listData = new ArrayList();
//当前页
private int curPage =1;
//每页显示记录条数
public static int perCount=3;
//总页数
private int pageCount;
//总记录数
private int recCount;
//分页起始位置 = （当前页-1）*每页显示的记录数=(curPage-1)*perCount;
private int startIndex=0;
public int getStartIndex() {
return startIndex;
}
public List getListData() {
return listData;
}
public void setListData(List listData) {
this.listData = listData;
}
public int getCurPage() {
return curPage;
}
//设置当前页
public void setCurPage(int curPage) {
if(curPage<1) {
curPage = 1;
}else if(curPage>pageCount){
curPage = pageCount;
}
this.curPage = curPage;
//计算起始位置
this.startIndex = perCount*(curPage-1);
}
public int getRecCount() {
return recCount;
}
//设置记录总数
public void setRecCount(int recCount) {
this.recCount = recCount;
//设置总页数,ceil方法返回大于该数字本身的最小正整数
this.pageCount = (int)Math.ceil(recCount*1.0/perCount);
}
public int getPageCount() {
return pageCount;
}
}
前端页面（collegeAdd.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增学校</title>
<!--加载JQuery库-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function add(){
if($("#collegeName").val() == ""){
alert("学校名称不能为空。")
$("#collegeName").focus();
return;
}
if($("#contact").val() == ""){
alert("请输入联系人。")
$("#contact").focus();
return;
}
if($("#tel").val() == ""){
alert("请输入联系人电话。")
$("#tel").focus();
return;
}
//调用JQuery的post方法提交数据
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
collegeName:$("#collegeName").val(),
contact:$("#contact").val(),
tel:$("#tel").val(),
collegeAddr:$("#collegeAddr").val(),
remark:$("#remark").val(),
action:"add",
curPage:1
},
function (data){
//情况内容
clearContent();
//执行成功返回的结果
pageList(data);
},
"json"
);
}
//修改
function edit(collegeId){
//调用JQuery的post方法提交数据
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
action:"edit",
collegeId:collegeId
},
function (data){
//执行成功,显示要修改的当前记录的值
$("#collegeId").val(data.college.collegeId);
$("#collegeName").val(data.college.collegeName);
$("#contact").val(data.college.contact);
$("#tel").val(data.college.tel);
$("#collegeAddr").val(data.college.collegeAddr);
$("#remark").val(data.college.remark);
},
"json"
);
}
//修改保存
function editSave(){
if($("#collegeName").val() == ""){
alert("学校名称不能为空。")
$("#collegeName").focus();
return;
}
if($("#contact").val() == ""){
alert("请输入联系人。")
$("#contact").focus();
return;
}
if($("#tel").val() == ""){
alert("请输入联系人电话。")
$("#tel").focus();
return;
}
//调用JQuery的post方法提交数据
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
collegeId:$("#collegeId").val(),
collegeName:$("#collegeName").val(),
contact:$("#contact").val(),
tel:$("#tel").val(),
collegeAddr:$("#collegeAddr").val(),
remark:$("#remark").val(),
action:"editSave",
curPage:1
},
function (data){
//情况内容
clearContent();
//执行成功返回的结果
pageList(data);
},
"json"
);
}
//清空内容
function clearContent(){
$("#collegeName").val("");
$("#collegeAddr").val("");
$("#contact").val("");
$("#tel").val("");
$("#remark").val("");
}
//删除
function del(collegeId){
//调用JQuery的post方法提交数据
if(!confirm('删除确认')){
return ;
}
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
action:"del",
collegeId:collegeId
},
function (data){
//执行成功,更新列表
listData(1);
},
"json"
);
}
function listData(curPage){
let url = "/ajaxProj/collegeServlet"
$.post(
url,
{
action:"list",
curPage:curPage
},
function (data){
//执行成功返回的结果
pageList(data);
},
"json"
);
}
function pageList(data){
var collegeList = data.pager.listData;
var li = "";
//each就是循环语句,i是索引好，d代表collegevo对象
$.each(collegeList,function (i,d){
li += "<tr>";
li += "<td>"+ d.collegeId +"</td>";
li += "<td>"+ d.collegeName +"</td>";
li += "<td>"+ d.contact +"</td>";
li += "<td>"+ d.tel +"</td>";
li += "<td>"+ d.collegeAddr +"</td>";
li += "<td>"+ d.remark +"</td>";
li += "<td align='center'><a href='javascript:void(0);' onclick='edit(" + d.collegeId +");'>修改</a> <a href='javascript:void(0);' onclick='del(" + d.collegeId +");'>删除</a></td>";
li += "</tr>";
})
var tbodyList = $("#tbodyList");
tbodyList.html(li);
//分页代码
var pagerTr = "<td>";
pagerTr += "<a href='javascript:void(0);' onclick='listData(1)'>首页</a> ";
pagerTr += "<a href='javascript:void(0);' onclick='listData("+(data.pager.curPage-1)+")'>上一页</a> ";
pagerTr += "<a href='javascript:void(0);' onclick='listData("+(data.pager.curPage+1)+")'>下一页</a> ";
pagerTr += "<a href='javascript:void(0);' onclick='listData("+ data.pager.pageCount+")'>尾页</a>";
pagerTr += "</td>";
pagerTr += "<td align='right'>当前页"+data.pager.curPage + "/" + data.pager.pageCount + "页</td>";
var pageSet = $("#pagerTr");
console.log(pagerTr);
pageSet.html(pagerTr);
console.log(data);
}
listData(1);
</script>
</head>
<body>
<h2 align="center">新增学校</h2>
<hr>
<table align="center" border="1" width="800">
<input name="collegeId" id="collegeId" type="hidden">
<tr>
<td align="right">学校名称</td>
<td><input type="text" name="collegeName" id="collegeName"></td>
<td><font size="2" color="red">*必填</font> </td>
</tr>
<tr>
<td align="right">联系人</td>
<td><input type="text" name="contact" id="contact"></td>
<td><font size="2" color="red">*必填</font> </td>
</tr>
<tr>
<td align="right">联系电话</td>
<td><input type="text" name="tel" id="tel"></td>
<td><font size="2" color="red">*必填</font> </td>
</tr>
<tr>
<td align="right">学校地址</td>
<td><input type="text" name="collegeAddr" id="collegeAddr"></td>
<td><font size="2" color="red"> </font> </td>
</tr>
<tr>
<td align="right">学校介绍</td>
<td><textarea name="remark" id="remark" style="height: 200px;width: 600px"></textarea></td>
<td><font size="2" color="red"> </font> </td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="button" value="返回列表" onclick="listData();">
<input type="button" value="新增" onclick="add();">
<input type="button" value="修改" onclick="editSave();">
</td>
</tr>
</table>
<fieldset>
<legend>学校资料列表</legend>
<table align="center" border="1" width="1100" cellpadding="3" cellspacing="1">
<thead>
<tr>
<th>学校ID</th>
<th>学校名称</th>
<th>联系人</th>
<th>联系电话</th>
<th>地址</th>
<th>介绍</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody id="tbodyList">
</tbody>
</table>
<table align="center" width="1100">
<tr id="pagerTr">
</tr>
</table>
</fieldset>
</body>
</html>后台代码（CollegeServlet.java）
package com.servlet;
import com.alibaba.fastjson.JSONObject;
import com.bean.CollegeVo;
import com.bean.PageObject;
import com.dao.CollegeDAO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet(name = "CollegeServlet",value = "/collegeServlet")
public class CollegeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
CollegeDAO dao = new CollegeDAO();
if(action.equals("add")) {
CollegeVo college = new CollegeVo();
college.setCollegeId(0);
college.setPic("");
college.setCollegeName(request.getParameter("collegeName"));
college.setContact(request.getParameter("contact"));
college.setTel(request.getParameter("tel"));
college.setCollegeAddr(request.getParameter("collegeAddr"));
college.setRemark(request.getParameter("remark"));
//数据库的操作
if (dao.add(college)) {
//返回结果
list(request, out);
} else {
out.println("新增失败");
}
}else if(action.equals("editSave")) {
CollegeVo college = new CollegeVo();
college.setCollegeId(Integer.parseInt(request.getParameter("collegeId")));
college.setPic("");
college.setCollegeName(request.getParameter("collegeName"));
college.setContact(request.getParameter("contact"));
college.setTel(request.getParameter("tel"));
college.setCollegeAddr(request.getParameter("collegeAddr"));
college.setRemark(request.getParameter("remark"));
//数据库的操作
if (dao.edit(college)) {
//返回结果
list(request,out);
} else {
out.println("修改失败");
}
}else if(action.equals("edit")){
String collegeId = request.getParameter("collegeId");
CollegeVo college = dao.getById(collegeId);
JSONObject json = new JSONObject();
json.put("college",college);
out.println(json.toJSONString());
}else if(action.equals("del")){
String collegeId = request.getParameter("collegeId");
dao.del(collegeId);
list(request,out);
}else if(action.equals("list")){
list(request,out);
}
}
public void list(HttpServletRequest request, PrintWriter out){
PageObject pager = new PageObject();
CollegeDAO dao = new CollegeDAO();
int cnt = dao.getCount();
//设置分页对象的记录总数
pager.setRecCount(cnt);
//设置当前页(第一次运行时curPage是空值null)
if(request.getParameter("curPage") !=null) {
//当前页面
int curPage = Integer.parseInt(request.getParameter("curPage"));
pager.setCurPage(curPage);
}
List<CollegeVo> collegeList = dao.getList(pager);
pager.setListData(collegeList);
JSONObject json = new JSONObject();
json.put("pager", pager);
System.out.println(json.toJSONString());
out.println(json.toJSONString());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
运行结果
扫一扫
5270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
