我的学习之路-JSON的简单使用

于 2021-04-15 00:00:38 发布
阅读量205 收藏 1
点赞数 2
分类专栏： 我的学习 文章标签： java ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50640764/article/details/115712092
版权

JSON应用

上一篇我们了解了JSON的基本使用，下面让我们把JSON用到应用中。建立一个简单的web应用，用Ajax和JSON做网页的部分刷新。话不多说，直接开始。

准备

首先，我们建立一个student表，里面加一点数据。这里我用的是Mysql。
sql

接着，新建一个web项目，这里我用的是IDEA。在java目录下新建几个包，用来分类，存放类。
IDEA

编码

我们在bean包下新建一个实体类，名为student。

public class student {
   private int id;
   private String sname;
   private String job;

   public int getId() {
       return id;
   }

   public void setId(int id) {
       this.id = id;
   }

   public String getSname() {
       return sname;
   }

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

   public String getJob() {
       return job;
   }

   public void setJob(String job) {
       this.job = job;
   }
}

在jdbc包下新建一个JDBCUtils类，用来封装我们连接数据库时比较繁琐的代码。

import java.sql.*;

public class JDBCUtils {
    //初始化几个重要的参数
    //驱动名，使用8以前的版本为：“com.mysql.jdbc.Driver"
    public static final String DRIVER="com.mysql.cj.jdbc.Driver";
    //连接字符串，这里test为我的数据库名
    public static final String URL = "jdbc:mysql://localhost:3306/test?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai";
    //用户名
    public static final String USERNAME="root";
    //密码
    public static final String PASSWORD="yxh001024";

    //获取连接
    public static Connection getConnection() throws SQLException,ClassNotFoundException{
        //注册驱动
        Class.forName(DRIVER);
        //创建连接
        Connection conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
        return conn;
    }

    //关闭连接
    public static void closeConnection(ResultSet rs, PreparedStatement pstmt, Connection conn){
        try{
            if(rs!=null){
                rs.close();
            }
            if(pstmt!=null){
                pstmt.close();
            }
            if(conn!=null&&!conn.isClosed()){
                conn.close();
            }
        }catch(SQLException e){
            e.printStackTrace();
        }
    }
}

不要忘了引入驱动的包，我们打开pom.xml,添加依赖。

<dependencies>
    <dependency>
           <groupId>mysql</groupId>
           <artifactId>mysql-connector-java</artifactId>
           <version>8.0.23</version>
     </dependency>
      <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>fastjson</artifactId>
           <version>1.2.76</version>
</dependency>
</dependencies>

接着在dao包下新建一个数据库操作类studentDao。

import com.example.bean.student;
import com.example.jdbc.JDBCUtils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class studentDao {


   public List selectAll(){
       Connection conn = null;
       PreparedStatement pstmt =null;
       ResultSet rs =null;
       List<student> list = new ArrayList();

       try {
           conn = JDBCUtils.getConnection();
           String sql="select * from student";
           pstmt = conn.prepareStatement(sql);
           rs = pstmt.executeQuery();
           while (rs.next()) {
               student s = new student();
               int id = rs.getInt("id");
               String sname = rs.getString("sname");
               String job = rs.getString("job");
               s.setId(id);
               s.setJob(job);
               s.setSname(sname);
               list.add(s);
               System.out.println(id + " " + sname + " " + job);
           }
       } catch (Exception e) {
           e.printStackTrace();
       }finally {
           JDBCUtils.closeConnection(rs,pstmt,conn);
       }
       return list;
   }
}

这里我只写了一个查询方法。查询所有的数据，把数据实例化为student对象，在把所有对象用集合保存。

然后在servlet包下新建一个testServlet类来处理请求。

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("/go")
public class testServlet extends HttpServlet {
   public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       List list =new studentDao().selectAll();
       String json = JSON.toJSONString(list);
       response.setContentType("text/html;charset=utf-8");
       PrintWriter out = response.getWriter();
       System.out.println(json);
       out.println(json);
   }
}

直接以注解的方式处理地址映射。当我们在前台访问/go这个路径时，请求就会交给这个类处理。
把我们上面保存了数据的集合转换成JSON对象，再把这个对象发送给前台。

最后，新建一个index.jsp。html文件也可以，这里我没有在jsp文件中书写java代码。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
   <title>Hello</title>
   <meta charset="UTF-8">
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   <script>
       $(document).ready(function (){
       $("#flush").click(function (){
           $("#table").html("");
           $.ajax({
               type: "post",
               dataType: "json",
               url:"go",
               success:function (data) {
                   $("#table").append(
                       "<tr><th>id</th><th>sname</th><th>job</th></tr>"
                   );
                   $.each(data,function(index,l){
                       if(l["id"]==null){
                           l["id"]="无";
                       }
                       if(l["sname"]==null){
                           l["sname"]="无";
                       }
                       if(l["job"]==null){
                           l["job"]="无";
                       }
                       $("#table").append(
                           "<tr><td>" + l["id"] + "</td>" +
                           "<td>"+ l["sname"] + "</td>" +
                           "<td>" + l["job"] + "</td></tr>"
                       )
                   })
               },
               error:function (){
                   $("#result").text("请求失败");
               }
           })
       });
       })
   </script>
   <style>
       table{
           border-collapse: collapse;
           width:400px;
           background: antiquewhite;
       }
       table,tr,th,td{
           border:2px solid rgba(122,145,156,0.8);
       }
       td{
           text-align: center;
       }
   </style>
</head>
<body>
<h1 id="result"></h1>
<br/>
<button id="flush">刷新</button>
<table id="table">
   <tr><th>id</th><th>sname</th><th>job</th></tr>

</table>
</body>
</html>

建立一个表格来显示数据，一个刷新按钮。其他细节可以忽略。
核心代码是这个：

$.ajax({
               type: "post",
               dataType: "json",
               url:"go",
               success:function (data) {
                   $("#table").append(
                       "<tr><th>id</th><th>sname</th><th>job</th></tr>"
                   );
                   $.each(data,function(index,l){
                       if(l["id"]==null){
                           l["id"]="无";
                       }
                       if(l["sname"]==null){
                           l["sname"]="无";
                       }
                       if(l["job"]==null){
                           l["job"]="无";
                       }
                       $("#table").append(
                           "<tr><td>" + l["id"] + "</td>" +
                           "<td>"+ l["sname"] + "</td>" +
                           "<td>" + l["job"] + "</td></tr>"
                       )
                   })
               },
               error:function (){
                   $("#result").text("请求失败");
               }
           })

这里我们使用jQuery的ajax方法。有几个参数：

  • type：规定请求的类型（GET 或 POST）。
  • dataType：预期的服务器响应的数据类型。这里是JSON
  • url：规定发送请求的 URL。默认是当前页面。这里我们把它发送给上面注解映射的servlet类处理。
  • success：当请求成功时运行的函数。接收后台传来的响应并显示出来
  • error：如果请求失败要运行的函数。打印错误就好了。

结果

我们把它部署到tomcat上运行看看。
1 开始啥都没有，但当我们点击刷新按钮时，数据库的数据就传到了表格中并被显示出来，不需要刷新页面。
在这里插入图片描述
一个简单的JSON传输应用。

浪浪浪子浪
关注
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值