JavaEE简单的servlet传递json与前端显示

最新推荐文章于 2023-05-27 20:51:58 发布

ignite_

最新推荐文章于 2023-05-27 20:51:58 发布

阅读量874

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/ignite_/article/details/90273515

版权

java 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

目录结构

在这里插入图片描述

前台页面 index3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.js"></script>
<script>

        function text(){
        $.getJSON(
            "json",
            function (result) {
                //eval函数转换json对象
                var json = eval(result);
                // alert(json.user[1].username);
                $('#text').append
                (   "<div class='one'>"+"password="+json.user[0].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[1].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[2].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[3].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[4].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[5].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[6].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[7].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[8].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[9].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[10].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[11].password+"</div>"+
                    "<div class='one'>"+"password="+json.user[12].password+"</div>"
                );
                }
        )
     }

</script>
<style>
    .one{
        color: red;
    }
</style>
<body>
<button onclick="text()">验证json</button>
<a href="json">进入servlet</a>
<div id="text"></div>
</body>
</html>

java代码

domain(实体类):

public class User {
    private String username;
    private String password;

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }
}

dao:

UserDao

import domain.User;
import java.sql.SQLException;
import java.util.List;
public interface UserDao {
//    根据账号密码查找用户
    public User selectUser(String username, String password) throws SQLException;
    //查找全部
    public List selectAll();
}

UserDaoImpl

import JDBCUtils.JDBCUtils;
import dao.UserDao;
import domain.User;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.junit.jupiter.api.Test;

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

public class UserDaoImpl implements UserDao {

    QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
    @Override
    public User selectUser(String username, String password) throws SQLException {
        String sql = "select * from user where username=? and password=?";
        User query = queryRunner.query(sql, new BeanHandler<User>(User.class),username,password);
        return query;
    }

    @Override
    public List selectAll() {
        String sql = "select * from user";
        List<User> query = null;
        try {
           query = queryRunner.query(sql, new BeanListHandler<User>(User.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
//        System.out.println(query);
        return query;
    }

}

service:

AjaxVideoService

import domain.User;

import java.util.List;

public interface AjaxVideoService {
    public List selectAll();
}

AjaxVideoServiceImpl

import dao.UserDao;
import dao.impl.UserDaoImpl;
import service.AjaxVideoService;
import java.util.List;
public class AjaxVideoServiceImpl implements AjaxVideoService {
    @Override
    public List selectAll() {
        UserDao userDao = new UserDaoImpl();
        return userDao.selectAll();
    }
}

servlet:

AjaxJsonServlet

import com.alibaba.fastjson.JSONObject;
import domain.User;
import service.AjaxVideoService;
import service.imp.AjaxVideoServiceImpl;
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.List;
@WebServlet(name = "AjaxJsonServlet")
public class AjaxJsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        //service
        AjaxVideoService ajaxVideoServlet = new AjaxVideoServiceImpl();

        //调用service
        List<User> list = ajaxVideoServlet.selectAll();
        PrintWriter out = response.getWriter();

        //list值存入json中
        JSONObject json= new JSONObject();
        json.put("user",list);

        //输出json
            System.out.println(json);
            out.print(json);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

}

web.xml

<!--  json-->
  <servlet>
    <servlet-name>AjaxJsonServlet</servlet-name>
    <servlet-class>servlet.AjaxJsonServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxJsonServlet</servlet-name>
    <url-pattern>/json</url-pattern>
  </servlet-mapping>

pom.xml(6个jar包)

<!--    json-->
<dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.8.8</version>
    </dependency>
    
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.8.8</version>
    </dependency>
    
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.8.8</version>
    </dependency>
    
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>


    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
    </dependency>
    
    <dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
    <classifier>jdk15</classifier>
    </dependency>

效果:

未请求发送:

在这里插入图片描述

发送请求后:

在这里插入图片描述

ignite_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaEE简单的servlet传递json与前端显示

目录结构前台页面 index3.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="js/jquery-3.3.1.js"...
复制链接

扫一扫