码迷，mamicode.com
首页 > Web开发 > 详细

servlet+ajax实现json数据交互

时间：2019-07-21 16:20:05      阅读：135      评论：0      收藏：0      [点我收藏+]

标签：style   结果   doget   div   drive   rman   lse   ase   记录   

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

技术图片

完成结果:

技术图片                                                         技术图片

 

 具体代码:

 

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>
    <!--引入js-->
    <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 数据持久层

 

servlet+ajax实现json数据交互

标签：style   结果   doget   div   drive   rman   lse   ase   记录   

原文地址：https://www.cnblogs.com/ciscolee/p/11221357.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！