AJAX案例——展示数据库中学生信息

一、环境的搭建

1、导包

AJAX案例——展示数据库中学生信息_第1张图片
导包

2、导入工具库

  本案例使用的工具类是之前用过的JDBCUtils。

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class JDBCUtils {
    // 创建一个连接池:但是这个连接池只需要创建一次即可。
    private static final ComboPooledDataSource dataSource = new ComboPooledDataSource();
    
    /**
     * 获得连接的方法
     * @throws SQLException 
     */
    public static Connection getConnection() throws SQLException{
        return dataSource.getConnection();
    }
    
    /**
     * 获得数据源:
     */
    public static DataSource getDataSource(){
        return dataSource;
    }
    
}

3、创建数据库和表

  打开mysql数据库,创建数据库和表,并添加一些记录。

use ajax_test;
create table student(
    sid int primary key auto_increment,
    sname varchar(20),
    gender varchar(10),
    age int
);

insert into student(sname,gender,age) values ('zhangsan','male',18);
insert into student(sname,gender,age) values ('lisi','male',20);
insert into student(sname,gender,age) values ('wangwu','male',22);
insert into student(sname,gender,age) values ('zhaoliu','male',18);
AJAX案例——展示数据库中学生信息_第2张图片
数据库

4、导入并修改配置文件

AJAX案例——展示数据库中学生信息_第3张图片
导入配置文件

AJAX案例——展示数据库中学生信息_第4张图片
配置文件

二、实现案例

1、创建JavaBean

public class Student {
    private Integer sid;
    private String sname;
    private String gender;
    private int age;

    public Student() {
        super();
        // TODO Auto-generated constructor stub
    }

    public Student(Integer sid, String sname, String gender, int age) {
        super();
        this.sid = sid;
        this.sname = sname;
        this.gender = gender;
        this.age = age;
    }

    public Integer getSid() {
        return sid;
    }

    public void setSid(Integer sid) {
        this.sid = sid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

}

2、实现StudentServlet

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.Student;
import com.itheima.service.StudentService;

public class StudentServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取所有的学生数据
        StudentService service = new StudentService();
        List list = service.findAll();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

3、实现StudentService

import java.util.List;

import com.itheima.dao.StudentDao;
import com.itheima.domain.Student;

public class StudentService {

    public List findAll() {
        StudentDao dao = new StudentDao();
        return dao.finAll();
    }

}

4、实现StudentDao

package com.itheima.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.itheima.domain.Student;
import com.itheima.utils.JDBCUtils;

public class StudentDao {

    public List finAll() {
        List list = null;
        //获取
        QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
        //查询学生信息
        try {
            list = qr.query("select * from student", new BeanListHandler(Student.class));
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return list;
    }

}

5、完善StudentServlet

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.Student;
import com.itheima.service.StudentService;

public class StudentServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取所有的学生数据
        StudentService service = new StudentService();
        List list = service.findAll();
        
        if(list != null){
            //将学生信息进行拼接
            StringBuilder sb = new StringBuilder();
            for (Student student : list) {
                sb.append("");
                    sb.append(""+student.getSname()+"");
                    sb.append(""+student.getGender()+"");
                    sb.append(""+student.getAge()+"");
                sb.append("");
            }
            
            //返回响应信息
            out.println(sb.toString());
        }
        
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

6、创建HTML页面,展示学生信息





Insert title here




    
姓名 性别 年龄

7、案例实现结果

AJAX案例——展示数据库中学生信息_第5张图片
学生信息

三、使用JSON改写案例

  JSON是一种轻量级的数据交互(传输)格式,我们收发数据都可以使用这种格式,但要注意必须使用同样的格式。

  jQuery的AJAX接收数据的格式:
    普通文本
    xml:表示一个对象需要使用许多的标签
    json:表示一个对象可以通过js对象表示:
       {username:"zhangsan",age:18}
       表示多个对象:
       [{name:"zhangsan",age:18},{name:"lisi",age:18}]

json的使用方式:
  ajax方法:
    在参数js对象中设置dataType属性。

    {
        dataType:"json"
    }

  get方法:
    两个参数变三个参数:url,fn,"json"
    三个参数变四个参数:url,data,fn,"json"
  post方法:
    两个参数变三个参数:url,fn,"json"
    三个参数变四个参数:url,data,fn,"json"

1、导入与json有关的jar包

  使用JSON的相关jar包,下载链接: https://pan.baidu.com/s/1POt2rbbZ4-OuPNl3ZUuTfQ 密码: djyp

AJAX案例——展示数据库中学生信息_第6张图片
导入jar包

2、实现StudentJSONServlet

package com.itheima.service;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.Student;

import net.sf.json.JSONArray;

public class StudentJSONServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取所有的学生对象
        StudentService service = new StudentService();
        List list = service.findAll();
        
        if(list != null){
            //这里需要使用jsonlib中的两个类
            //JSONArray     可以将数组、List转换成json格式的数据
            //JSONObject    可以将对象、Map转换成json格式的数据
            JSONArray jsonArray = JSONArray.fromObject(list);
            out.println(jsonArray.toString());
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

3、创建studentJSON.html页面





Insert title here




    
姓名 性别 年龄

4、案例实现结果

AJAX案例——展示数据库中学生信息_第7张图片
学生信息

你可能感兴趣的:(AJAX案例——展示数据库中学生信息)