servlet+ajax实现json数据交互

旧城等待， 2021-11-01 15:10 440阅读 0赞

需要插件　Jquery、jar包:json-lib-2.2.3-jdk15.jar及其他jar包如下:

![1012652-20190721153727747-1296919082.png][]

完成结果:【这种写法只能用数据库中id=1的第一条数据登录，是什么原因呢？还在实验中】

![1012652-20190721153906146-310044426.png][] ![1012652-20190721153942568-1711547447.png][]

具体代码:

1、前台js+html代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
        
        <script src="./jquery-3.3.1.js"></script>
    <script type="text/javascript">
    function login(){
        var uname = $("#uname").val();
        var pwd = $("#pwd").val();
        alert(uname);
    $.ajax({
        type : "post",
        async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "UserServlet",    //请求发送到UserServlet处
        data : {
         "uname":uname,"pwd":pwd},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
                for(var i=0;i<result.length;i++){
                    alert(result[i].id+result[i].uname+result[i].nickname+result[i].pwd);
                    //后期将获得的数据加入html
                    addLabel(result[i].id,result[i].uname,result[i].nickname,result[i].pwd)
                }
                //隐藏加载动画略
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("请求数据失败!");
            myChart.hideLoading();
        }
    });
    }
    //实现添加元素的函数
    function addLabel(id,uname,nickname,pwd){
        $("thead").append("<tr>")
        $("thead").append("<td>"+id+"</td>");
        $("thead").append("<td>"+uname+"</td>");
        $("thead").append("<td>"+nickname+"</td>");
        $("thead").append("<td>"+pwd+"</td></tr>");
    }
    </script>
    <style type="text/css">
    *{
         
    margin:0 auto;
    padding:0;
    }
    #container{
         
    width:600px;
    height:500px;
    border:1px solid red;
    border-radius:10%;
    }
    /**将行内元素设置为块元素，并分行控制**/
    #cover_uname{
         
    margin-top:200px;
    width:300px;
    height:50px;
    display:block;
    }
    #cover_pwd{
         
    width:300px;
    height:50px;
    display:block;
    }
    #cover_login{
         
    width:60px;
    height:50px;
    display:block;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <span id="cover_uname">账户:<input type="text" id="uname"/></span>
    <span id="cover_pwd">密码:<input type="text" id="pwd"/></span>
    <span id="cover_login"><button onclick="login()">登录</button></span>
    </div>
    <div id="content">
    <table border="1" style="border-collapse:collapse;border:1px solid red;">
    <thead><tr><td colspan="4" align="center">信息</td></tr></thead>
    </table>
    </div>
    </body>
    </html>

2、servlet代码:

package gc.servlet;
    
    import gc.dao.UserDao;
    import gc.json.ToJson;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * @author macbook
     * @see 用户登录控制/增删改查控制
     */
    public class UserServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
        public UserServlet() {
            super();
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("application/json; charset=utf-8");
            response.setHeader("cache-control", "no-cache");
            PrintWriter out = response.getWriter();
            ToJson json = new ToJson();
            UserDao dao = new UserDao();
            //根据状态，进行判断
            String uname =  request.getParameter("uname");
            String pwd = request.getParameter("pwd");
            System.out.println(uname+pwd);
            //login登录
                String loginStatus = dao.login(uname, uname);
                  if(loginStatus.equals("fail")){
                      //调转到登录失败页面
                      response.sendError(404);
                  }else {
                    //说明获取到昵称，返回昵称和用户信息
                      out.print(json.getAUserJson(uname));
                      System.out.println(json.getAUserJson(uname));
                }
            //reg注册
            //del删除
            //update修改
            //select查询
            out.flush();
            out.close();
        }
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
    
    }

3、其他队数据库操作的类和转化为json数据的类:

数据库信息的类:

package gc.util;
    
    public class MySqlDBInfor {
        public static String  driverName = "com.mysql.jdbc.Driver";
        public static String url = "jdbc:mysql://127.0.0.1:3306/gc?useUnicode=true&characterEncoding=UTF-8";
        public static String user = "root";
        public static String pwd = "123456";
    }

连接数据库的类:

package gc.util;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    
    public class ConnectDB {
        static Connection connection = null;//1.
        //数据库连接
        public static Connection getConnectDB(){
            try {
                Class.forName(MySqlDBInfor.driverName);//2.
                connection = DriverManager.getConnection(MySqlDBInfor.url,MySqlDBInfor.user,MySqlDBInfor.pwd);//3.
                return connection;
            } catch (Exception e) {
                System.out.println(e.getMessage());
            }
            return connection;
        }
        //数据库连接关闭
        public static void closeDB(){
            try {
                getConnectDB().close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        /**
         * @see 用于向数据库插入数据
         * @param sql
         * @return
         */
        public static int updateData(String sql){
            try {
                Statement statement = getConnectDB().createStatement();
                int a = statement.executeUpdate(sql);
                if(a>0)return 1;
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return 0;
        }
        /**
         * @see 查询数据
         * @param sql
         * @return
         */
        public static ResultSet queryData(String sql){
            Statement statement;
            try {
                statement = getConnectDB().createStatement();
                ResultSet set = statement.executeQuery(sql);
                return set;
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();//出现异常就直接返回null
                return null;
            }
        }
        
        public static boolean insertData(String sql){
            try {
                Statement statement = getConnectDB().createStatement();
                if(statement.executeUpdate(sql)>0)return true;
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return false;
            
        }
        
        public static void main(String[] args) throws SQLException {
            String sql = "select *from user;"; 
            ResultSet set = ConnectDB.queryData(sql);
            while (set.next()) {
                System.out.println(set.getString("uname"));
            }
        }
    }

操作类:

package gc.dao;
    
    import gc.table.User;
    import gc.util.ConnectDB;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import java.util.List;
    
    public class UserDao {
        Connection connection = ConnectDB.getConnectDB();
        User user;
        //查询账户
        public List<User> selectUser(String sql){
            PreparedStatement statement;
            List<User> list = new ArrayList<User>();
            ResultSet set;
            try {
                statement = connection.prepareStatement(sql);
                set = statement.executeQuery();
                while (set.next()) {
                    user = new User();
                    user.setId(set.getString("id"));
                    user.setUname(set.getString("uname"));
                    user.setPwd(set.getString("pwd"));
                    user.setNickname(set.getString("nickname"));
                    list.add(user);
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return list;
        }
        //插入账户
        //删除账户
        //修改账户
        //以上是基本操作，下面是servlet调用时的一些特例操作
        //登录，密码账号争取，账号正确，密码不正确【由于不设置验证码，故必须二者均要正确才行，避免撞库】
        public String login(String uname,String pwd){
            String sql = "select *from user;";
            List<User> users = selectUser(sql);
            for (int i = 0; i < users.size();) {
                User user = users.get(i);
                if (user.getUname().equals(uname)&&user.getPwd().equals(pwd)) {
                    return user.getNickname();
                }else {
                    return "fail";
                }
            }
            return "fail";
        }
        //测试
        public static void main(String[] args) {
            UserDao dao = new UserDao();
            String sql = "select *from user;";
            List<User> list = dao.selectUser(sql);
            for (int i = 0; i < list.size(); i++) {
                User user = list.get(i);
                System.out.println(user.getUname());
            }
            //测试json化的数据，已在ToJson类内进行测试使用时调用即可
        }
    }

将数据转化为json的类:

package gc.json;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.List;
    
    
    
    
    
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    import gc.dao.UserDao;
    import gc.table.User;
    import gc.util.ConnectDB;
    
    //将所有表的查询到的结果转化为json数据的类
    public class ToJson {
        //首先对表中某些字段的值进行统计，然后再交给本类
        public void json(String countType,int countNum){
            
        }
        public void json(){
            
        }
        /**
         * 本类用于将json数据直接交给html的测试
         */
        public List<FakeForms> getJsonTest(){
            //1、获取数据库数据，并进行统计
            //2、对数据进行json转化
            //3、实现基带板类型统计，然后将之数据化
            //4、x表示板卡类型，y表示统计
            String sql = "select count(if(basebandBoard='BPN2',basebandBoard,null)) BPN2,count(if(basebandBoard='CCE1',basebandBoard,null)) CCE1,count(if(basebandBoard='BPP1',basebandBoard,null)) BPP1,count(if(basebandBoard='FA4',basebandBoard,null)) FA4,count(if(basebandBoard='FA4A',basebandBoard,null)) FA4A,count(if(basebandBoard='FA6',basebandBoard,null)) FA6,count(if(basebandBoard='PM10',basebandBoard,null)) PM10,count(if(basebandBoard='PM10B',basebandBoard,null)) PM10B,count(if(basebandBoard='SA0',basebandBoard,null)) SA0 from four;";
            Connection connection = ConnectDB.getConnectDB();
            List<FakeForms> fours = new ArrayList<>();
            try {
                PreparedStatement statement = connection.prepareStatement(sql);
                ResultSet set = statement.executeQuery();
                while (set.next()) {
                    FakeForms fakeForms = new FakeForms();
                    fakeForms.setBPN2(set.getString("BPN2"));
                    fakeForms.setBPP1(set.getString("BPP1"));
                    fakeForms.setCCE1(set.getString("CCE1"));
                    fakeForms.setFA4(set.getString("FA4"));
                    fakeForms.setFA4A(set.getString("FA4A"));
                    fakeForms.setFA6(set.getString("FA6"));
                    fakeForms.setPM10(set.getString("PM10"));
                    fakeForms.setPM10B("PM10B");
                    fakeForms.setSA0(set.getString("SA0"));
                    fours.add(fakeForms);
                }
                
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return null;
            }
            return fours;
            
        }
        
        //获取用户json数据
        public JSONArray getUserJson(){
            UserDao dao2  = new UserDao();
            String sql = "select *from user;";
            List<User> list = dao2.selectUser(sql);
            JSONArray jsonArray = new JSONArray();
            for (int i = 0; i < list.size(); i++) {
                User user = list.get(i);
                //数据json化
                JSONObject jsonObject = JSONObject.fromObject(user);
                jsonArray.add(jsonObject);
            }
            //测试
            //System.out.println(jsonArray);
            return jsonArray;
        }
        //获取单个用户json数据
        public JSONArray getAUserJson(String uname){
            UserDao dao2  = new UserDao();
            String sql = "select *from user where uname='"+uname+"';";
            List<User> list = dao2.selectUser(sql);
            JSONArray jsonArray = new JSONArray();
            for (int i = 0; i < list.size(); i++) {
                User user = list.get(i);
                //数据json化
                JSONObject jsonObject = JSONObject.fromObject(user);
                jsonArray.add(jsonObject);
            }
            //测试
            //System.out.println(jsonArray);
            return jsonArray;
        }
        //测试
        public static void main(String[] args) {
            ToJson dao = new ToJson();
            JSONArray array = new JSONArray();
            List<FakeForms> fours = dao.getJsonTest();
            for (int i = 0; i < fours.size(); i++) {
                FakeForms four = fours.get(i);
                //json化
                JSONObject jsonObject = JSONObject.fromObject(four);
                array.add(jsonObject);
                System.out.println(four.getBPN2());
                System.out.println(array.toString());
            }
            //下面是将查询出的结果进行json格式化
            //下面是对User的数据json化
            System.out.println(dao.getUserJson());
            System.out.println(dao.getAUserJson("cisco"));
        }
    }

映射表:

package gc.table;
    
    /** 登录系统的账户表 **/
    public class User {
        private String id;
        private String uname;
        private String pwd;
        private String nickname;//昵称
        /**
         * @return the id
         */
        public String getId() {
            return id;
        }
        /**
         * @param id the id to set
         */
        public void setId(String id) {
            this.id = id;
        }
        /**
         * @return the uname
         */
        public String getUname() {
            return uname;
        }
        /**
         * @param uname the uname to set
         */
        public void setUname(String uname) {
            this.uname = uname;
        }
        /**
         * @return the pwd
         */
        public String getPwd() {
            return pwd;
        }
        /**
         * @param pwd the pwd to set
         */
        public void setPwd(String pwd) {
            this.pwd = pwd;
        }
        /**
         * @return the nickname
         */
        public String getNickname() {
            return nickname;
        }
        /**
         * @param nickname the nickname to set
         */
        public void setNickname(String nickname) {
            this.nickname = nickname;
        }
    }

本篇文章主要用于记录json数据转化，注释中提到的功能多没实现，这里主要是记录JSON数据转化及前后交互，实现的过程。

基本思路:

前台发送json数据给servlet，同时请求servlet给予json数据。不考虑后台处理流程，就是这样的交互，双向交互的过程。那么具体细节呢？

首先html发送json数据请求,并请求json数据，此时servlet接收数据后，交由dao类/ToJson类进行处理，根据需要选择。而ToJson则会调用Dao类，实现代码重用，同时快速转化数据为json。即普通的数据请求，如增删改，使用dao即可，牵涉到json则交由Tojson处理。当数据到了dao这里，dao又去调用数据库连接对象进行操作。

按数据流向，我给他按【个人理解的数据分层】:

html/js ajax请求层

servlet 数据接收层/发送

dao/ToJson/table映射类 数据处理/转化层

ConnectionDB 数据持久层

转载于:https://www.cnblogs.com/ciscolee/p/11221357.html

[1012652-20190721153727747-1296919082.png]: /images/20211101/7bdc7830ba544cf88998a6e66a4b167c.png
[1012652-20190721153906146-310044426.png]: https://img2018.cnblogs.com/blog/1012652/201907/1012652-20190721153906146-310044426.png
[1012652-20190721153942568-1711547447.png]: /images/20211101/fb8c7f967c954fbeb98dadcc9dac4c77.png