第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）-Toy模板网

这篇具有很好参考价值的文章主要介绍了第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。文章来源地址https://www.toymoban.com/news/detail-507545.html

基础环境要求

序号	资源	描述
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() + "'

到了这里，关于第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！