servlet+ajax实现json数据交互

旧城等待， 2021-11-01 15:10 493阅读 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代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>登录</title>
  8.     <!--引入js-->
  9.     <script src="./jquery-3.3.1.js"></script>
  10. <script type="text/javascript">
  11. function login(){
  12.     var uname = $("#uname").val();
  13.     var pwd = $("#pwd").val();
  14.     alert(uname);
  15. $.ajax({
  16.     type : "post",
  17.     async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
  18.     url : "UserServlet",    //请求发送到UserServlet处
  19.     data : {
  20.      "uname":uname,"pwd":pwd},
  21.     dataType : "json",        //返回数据形式为json
  22.     success : function(result) {
  23.         //请求成功时执行该函数内容，result即为服务器返回的json对象
  24.             for(var i=0;i<result.length;i++){
  25.                 alert(result[i].id+result[i].uname+result[i].nickname+result[i].pwd);
  26.                 //后期将获得的数据加入html
  27.                 addLabel(result[i].id,result[i].uname,result[i].nickname,result[i].pwd)
  28.             }
  29.             //隐藏加载动画略
  30.     },
  31.     error : function(errorMsg) {
  32.         //请求失败时执行该函数
  33.         alert("请求数据失败!");
  34.         myChart.hideLoading();
  35.     }
  36. });
  37. }
  38. //实现添加元素的函数
  39. function addLabel(id,uname,nickname,pwd){
  40.     $("thead").append("<tr>")
  41.     $("thead").append("<td>"+id+"</td>");
  42.     $("thead").append("<td>"+uname+"</td>");
  43.     $("thead").append("<td>"+nickname+"</td>");
  44.     $("thead").append("<td>"+pwd+"</td></tr>");
  45. }
  46. </script>
  47. <style type="text/css">
  48. *{
  50. margin:0 auto;
  51. padding:0;
  52. }
  53. #container{
  55. width:600px;
  56. height:500px;
  57. border:1px solid red;
  58. border-radius:10%;
  59. }
  60. /**将行内元素设置为块元素，并分行控制**/
  61. #cover_uname{
  63. margin-top:200px;
  64. width:300px;
  65. height:50px;
  66. display:block;
  67. }
  68. #cover_pwd{
  70. width:300px;
  71. height:50px;
  72. display:block;
  73. }
  74. #cover_login{
  76. width:60px;
  77. height:50px;
  78. display:block;
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <div id="container">
  84. <span id="cover_uname">账户:<input type="text" id="uname"/></span>
  85. <span id="cover_pwd">密码:<input type="text" id="pwd"/></span>
  86. <span id="cover_login"><button onclick="login()">登录</button></span>
  87. </div>
  88. <div id="content">
  89. <table border="1" style="border-collapse:collapse;border:1px solid red;">
  90. <thead><tr><td colspan="4" align="center">信息</td></tr></thead>
  91. </table>
  92. </div>
  93. </body>
  94. </html>

2、servlet代码:

  1. package gc.servlet;
  3. import gc.dao.UserDao;
  4. import gc.json.ToJson;
  6. import java.io.IOException;
  7. import java.io.PrintWriter;
  9. import javax.servlet.ServletException;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  14. /**
  15.  * @author macbook
  16.  * @see 用户登录控制/增删改查控制
  17.  */
  18. public class UserServlet extends HttpServlet {
  19.     private static final long serialVersionUID = 1L;
  20.     public UserServlet() {
  21.         super();
  22.     }
  23.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  24.         response.setContentType("application/json; charset=utf-8");
  25.         response.setHeader("cache-control", "no-cache");
  26.         PrintWriter out = response.getWriter();
  27.         ToJson json = new ToJson();
  28.         UserDao dao = new UserDao();
  29.         //根据状态，进行判断
  30.         String uname =  request.getParameter("uname");
  31.         String pwd = request.getParameter("pwd");
  32.         System.out.println(uname+pwd);
  33.         //login登录
  34.             String loginStatus = dao.login(uname, uname);
  35.               if(loginStatus.equals("fail")){
  36.                   //调转到登录失败页面
  37.                   response.sendError(404);
  38.               }else {
  39.                 //说明获取到昵称，返回昵称和用户信息
  40.                   out.print(json.getAUserJson(uname));
  41.                   System.out.println(json.getAUserJson(uname));
  42.             }
  43.         //reg注册
  44.         //del删除
  45.         //update修改
  46.         //select查询
  47.         out.flush();
  48.         out.close();
  49.     }
  50.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  51.         doGet(request, response);
  52.     }
  54. }

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

数据库信息的类:

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

连接数据库的类:

  1. package gc.util;
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.sql.Statement;
  9. public class ConnectDB {
  10.     static Connection connection = null;//1.
  11.     //数据库连接
  12.     public static Connection getConnectDB(){
  13.         try {
  14.             Class.forName(MySqlDBInfor.driverName);//2.
  15.             connection = DriverManager.getConnection(MySqlDBInfor.url,MySqlDBInfor.user,MySqlDBInfor.pwd);//3.
  16.             return connection;
  17.         } catch (Exception e) {
  18.             System.out.println(e.getMessage());
  19.         }
  20.         return connection;
  21.     }
  22.     //数据库连接关闭
  23.     public static void closeDB(){
  24.         try {
  25.             getConnectDB().close();
  26.         } catch (SQLException e) {
  27.             // TODO Auto-generated catch block
  28.             e.printStackTrace();
  29.         }
  30.     }
  32.     /**
  33.      * @see 用于向数据库插入数据
  34.      * @param sql
  35.      * @return
  36.      */
  37.     public static int updateData(String sql){
  38.         try {
  39.             Statement statement = getConnectDB().createStatement();
  40.             int a = statement.executeUpdate(sql);
  41.             if(a>0)return 1;
  42.         } catch (SQLException e) {
  43.             // TODO Auto-generated catch block
  44.             e.printStackTrace();
  45.         }
  46.         return 0;
  47.     }
  48.     /**
  49.      * @see 查询数据
  50.      * @param sql
  51.      * @return
  52.      */
  53.     public static ResultSet queryData(String sql){
  54.         Statement statement;
  55.         try {
  56.             statement = getConnectDB().createStatement();
  57.             ResultSet set = statement.executeQuery(sql);
  58.             return set;
  59.         } catch (SQLException e) {
  60.             // TODO Auto-generated catch block
  61.             e.printStackTrace();//出现异常就直接返回null
  62.             return null;
  63.         }
  64.     }
  66.     public static boolean insertData(String sql){
  67.         try {
  68.             Statement statement = getConnectDB().createStatement();
  69.             if(statement.executeUpdate(sql)>0)return true;
  70.         } catch (SQLException e) {
  71.             // TODO Auto-generated catch block
  72.             e.printStackTrace();
  73.         }
  74.         return false;
  76.     }
  78.     public static void main(String[] args) throws SQLException {
  79.         String sql = "select *from user;"; 
  80.         ResultSet set = ConnectDB.queryData(sql);
  81.         while (set.next()) {
  82.             System.out.println(set.getString("uname"));
  83.         }
  84.     }
  85. }

操作类:

  1. package gc.dao;
  3. import gc.table.User;
  4. import gc.util.ConnectDB;
  6. import java.sql.Connection;
  7. import java.sql.PreparedStatement;
  8. import java.sql.ResultSet;
  9. import java.util.ArrayList;
  10. import java.util.List;
  12. public class UserDao {
  13.     Connection connection = ConnectDB.getConnectDB();
  14.     User user;
  15.     //查询账户
  16.     public List<User> selectUser(String sql){
  17.         PreparedStatement statement;
  18.         List<User> list = new ArrayList<User>();
  19.         ResultSet set;
  20.         try {
  21.             statement = connection.prepareStatement(sql);
  22.             set = statement.executeQuery();
  23.             while (set.next()) {
  24.                 user = new User();
  25.                 user.setId(set.getString("id"));
  26.                 user.setUname(set.getString("uname"));
  27.                 user.setPwd(set.getString("pwd"));
  28.                 user.setNickname(set.getString("nickname"));
  29.                 list.add(user);
  30.             }
  31.         } catch (Exception e) {
  32.             // TODO Auto-generated catch block
  33.             e.printStackTrace();
  34.         }
  35.         return list;
  36.     }
  37.     //插入账户
  38.     //删除账户
  39.     //修改账户
  40.     //以上是基本操作，下面是servlet调用时的一些特例操作
  41.     //登录，密码账号争取，账号正确，密码不正确【由于不设置验证码，故必须二者均要正确才行，避免撞库】
  42.     public String login(String uname,String pwd){
  43.         String sql = "select *from user;";
  44.         List<User> users = selectUser(sql);
  45.         for (int i = 0; i < users.size();) {
  46.             User user = users.get(i);
  47.             if (user.getUname().equals(uname)&&user.getPwd().equals(pwd)) {
  48.                 return user.getNickname();
  49.             }else {
  50.                 return "fail";
  51.             }
  52.         }
  53.         return "fail";
  54.     }
  55.     //测试
  56.     public static void main(String[] args) {
  57.         UserDao dao = new UserDao();
  58.         String sql = "select *from user;";
  59.         List<User> list = dao.selectUser(sql);
  60.         for (int i = 0; i < list.size(); i++) {
  61.             User user = list.get(i);
  62.             System.out.println(user.getUname());
  63.         }
  64.         //测试json化的数据，已在ToJson类内进行测试使用时调用即可
  65.     }
  66. }

将数据转化为json的类:

  1. package gc.json;
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.util.ArrayList;
  8. import java.util.List;
  14. import net.sf.json.JSONArray;
  15. import net.sf.json.JSONObject;
  16. import gc.dao.UserDao;
  17. import gc.table.User;
  18. import gc.util.ConnectDB;
  20. //将所有表的查询到的结果转化为json数据的类
  21. public class ToJson {
  22.     //首先对表中某些字段的值进行统计，然后再交给本类
  23.     public void json(String countType,int countNum){
  25.     }
  26.     public void json(){
  28.     }
  29.     /**
  30.      * 本类用于将json数据直接交给html的测试
  31.      */
  32.     public List<FakeForms> getJsonTest(){
  33.         //1、获取数据库数据，并进行统计
  34.         //2、对数据进行json转化
  35.         //3、实现基带板类型统计，然后将之数据化
  36.         //4、x表示板卡类型，y表示统计
  37.         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;";
  38.         Connection connection = ConnectDB.getConnectDB();
  39.         List<FakeForms> fours = new ArrayList<>();
  40.         try {
  41.             PreparedStatement statement = connection.prepareStatement(sql);
  42.             ResultSet set = statement.executeQuery();
  43.             while (set.next()) {
  44.                 FakeForms fakeForms = new FakeForms();
  45.                 fakeForms.setBPN2(set.getString("BPN2"));
  46.                 fakeForms.setBPP1(set.getString("BPP1"));
  47.                 fakeForms.setCCE1(set.getString("CCE1"));
  48.                 fakeForms.setFA4(set.getString("FA4"));
  49.                 fakeForms.setFA4A(set.getString("FA4A"));
  50.                 fakeForms.setFA6(set.getString("FA6"));
  51.                 fakeForms.setPM10(set.getString("PM10"));
  52.                 fakeForms.setPM10B("PM10B");
  53.                 fakeForms.setSA0(set.getString("SA0"));
  54.                 fours.add(fakeForms);
  55.             }
  57.         } catch (SQLException e) {
  58.             // TODO Auto-generated catch block
  59.             e.printStackTrace();
  60.             return null;
  61.         }
  62.         return fours;
  64.     }
  66.     //获取用户json数据
  67.     public JSONArray getUserJson(){
  68.         UserDao dao2  = new UserDao();
  69.         String sql = "select *from user;";
  70.         List<User> list = dao2.selectUser(sql);
  71.         JSONArray jsonArray = new JSONArray();
  72.         for (int i = 0; i < list.size(); i++) {
  73.             User user = list.get(i);
  74.             //数据json化
  75.             JSONObject jsonObject = JSONObject.fromObject(user);
  76.             jsonArray.add(jsonObject);
  77.         }
  78.         //测试
  79.         //System.out.println(jsonArray);
  80.         return jsonArray;
  81.     }
  82.     //获取单个用户json数据
  83.     public JSONArray getAUserJson(String uname){
  84.         UserDao dao2  = new UserDao();
  85.         String sql = "select *from user where uname='"+uname+"';";
  86.         List<User> list = dao2.selectUser(sql);
  87.         JSONArray jsonArray = new JSONArray();
  88.         for (int i = 0; i < list.size(); i++) {
  89.             User user = list.get(i);
  90.             //数据json化
  91.             JSONObject jsonObject = JSONObject.fromObject(user);
  92.             jsonArray.add(jsonObject);
  93.         }
  94.         //测试
  95.         //System.out.println(jsonArray);
  96.         return jsonArray;
  97.     }
  98.     //测试
  99.     public static void main(String[] args) {
  100.         ToJson dao = new ToJson();
  101.         JSONArray array = new JSONArray();
  102.         List<FakeForms> fours = dao.getJsonTest();
  103.         for (int i = 0; i < fours.size(); i++) {
  104.             FakeForms four = fours.get(i);
  105.             //json化
  106.             JSONObject jsonObject = JSONObject.fromObject(four);
  107.             array.add(jsonObject);
  108.             System.out.println(four.getBPN2());
  109.             System.out.println(array.toString());
  110.         }
  111.         //下面是将查询出的结果进行json格式化
  112.         //下面是对User的数据json化
  113.         System.out.println(dao.getUserJson());
  114.         System.out.println(dao.getAUserJson("cisco"));
  115.     }
  116. }

映射表:

  1. package gc.table;
  3. /** 登录系统的账户表 **/
  4. public class User {
  5.     private String id;
  6.     private String uname;
  7.     private String pwd;
  8.     private String nickname;//昵称
  9.     /**
  10.      * @return the id
  11.      */
  12.     public String getId() {
  13.         return id;
  14.     }
  15.     /**
  16.      * @param id the id to set
  17.      */
  18.     public void setId(String id) {
  19.         this.id = id;
  20.     }
  21.     /**
  22.      * @return the uname
  23.      */
  24.     public String getUname() {
  25.         return uname;
  26.     }
  27.     /**
  28.      * @param uname the uname to set
  29.      */
  30.     public void setUname(String uname) {
  31.         this.uname = uname;
  32.     }
  33.     /**
  34.      * @return the pwd
  35.      */
  36.     public String getPwd() {
  37.         return pwd;
  38.     }
  39.     /**
  40.      * @param pwd the pwd to set
  41.      */
  42.     public void setPwd(String pwd) {
  43.         this.pwd = pwd;
  44.     }
  45.     /**
  46.      * @return the nickname
  47.      */
  48.     public String getNickname() {
  49.         return nickname;
  50.     }
  51.     /**
  52.      * @param nickname the nickname to set
  53.      */
  54.     public void setNickname(String nickname) {
  55.         this.nickname = nickname;
  56.     }
  57. }

本篇文章主要用于记录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

发表评论

表情：
评论列表 （有 0 条评论，493人围观）

还没有评论，来说两句吧...

相关阅读