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);
数据库

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<Student> 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<Student> 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<Student> finAll() {
        List<Student> list = null;
        //获取
        QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
        //查询学生信息
        try {
            list = qr.query("select * from student", new BeanListHandler<Student>(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<Student> list = service.findAll();
        
        if(list != null){
            //将学生信息进行拼接
            StringBuilder sb = new StringBuilder();
            for (Student student : list) {
                sb.append("<tr>");
                    sb.append("<td>"+student.getSname()+"</td>");
                    sb.append("<td>"+student.getGender()+"</td>");
                    sb.append("<td>"+student.getAge()+"</td>");
                sb.append("</tr>");
            }
            
            //返回响应信息
            out.println(sb.toString());
        }
        
    }

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

}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"GET",
            url:"/web14_test3/StudentServlet",
            success:function(msg){
                $("table").append(msg);
            }
        });
    });


</script>
</head>
<body>
    <table border="1" width="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
</body>
</html>

7、案例实现结果

学生信息

三、使用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

导入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<Student> 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页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"GET",
            dataType:"json",
            url:"/web14_test3/StudentJSONServlet",
            success:function(data){
                $(data).each(function(){
                    var s = "<tr><td>"+this.sname+"</td><td>"+this.gender+"</td><td>"+this.age+"</td></tr>"
                    
                    $("table").append(s);
                });
            }
        });
    });


</script>
</head>
<body>
    <table border="1" width="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
</body>
</html>

4、案例实现结果

学生信息
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,616评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,020评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,078评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,040评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,154评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,265评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,298评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,072评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,491评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,654评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,272评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2赞 351

推荐阅读更多精彩内容