servlet+ajax实现json数据交互

Posted ciscolee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了servlet+ajax实现json数据交互相关的知识，希望对你有一定的参考价值。

需要插件　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数据交互的主要内容，如果未能解决你的问题，请参考以下文章

Servlet 与 Ajax 交互一直报status=parsererror

Ajax第一课 Ajax访问Servlet解析Json格式

Servlet实现前后端json数据交互，前端js传输数据，后端fastjson解析json数据，以及Tomcat部署和jquery的部署

基于Tomcat服务器，通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现JSP前后端交互）

基于Tomcat服务器，通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现JSP前后端交互）

ajax_servlet数据交互实例