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 数据持久层

原文地址：https://www.cnblogs.com/ciscolee/p/11221357.html

时间： 2024-10-13 21:56:27

servlet+ajax实现json数据交互的相关文章

html、css/bootStrap、js/Jquery、ajax与json数据交互总结

设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的float和clear属性实现个人照片与文字的浮动排版).求学经历.获奖情况.参与社团.兴趣爱好等(一个方面组织成一张网页),利用框架技术实现在同一区域显示不同网页内容. 注册/登入模块 用户注册和登录:使用jQuery实现注册表单验证和登录表单验证 登入首页 利用文字.图片(使用AJAX实现图片轮转)展

springMVC学习(11)-json数据交互和RESTful支持

一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交互 1)环境准备: 加载json转换的jar包: springmvc中使用jackson的包进行json转换(@requestBody和@responseBody使用下边的包进行json转) jackson-core-asl-1.9.11.jar jackson-mapper-asl-1.9.11.

springmvc学习笔记(18)-json数据交互

springmvc学习笔记(18)-json数据交互 springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 添加json转换的依赖 配置json转换器 json交互测试 输入json串输出是json串 输入keyvalue输出是json串 本文主要介绍如何在springmvc中进行json数据的交互,先是环境准备和配置,然后分别展示了"输入json串,输出是json串"和"输入key/value,输出是json串"两种情况下

SpringMVC学习(十)——SpringMVC与前台的json数据交互

json数据格式在接口调用中.html页面中比较常用,json格式比较简单,解析也比较方便,所以使用很普遍.在SpringMVC中,也支持对json数据的解析和转换,这篇文章主要总结一下在SpringMVC中如何和前台交互json数据. 两种交互形式 SpringMVC和前台交互主要有两种形式,如下图所示: 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析,但是在C

SpringMVC - JSON数据交互

Json(JavaScript Object Notation),它是一种轻量级数据交换格式,格式简单,易于读写,目前使用特别广泛. 两种交互模式 ① 请求json.输出json,要求请求的是json串,所以在前端页面中需要将请求的内容转成json,不太方便.② 请求key/value.输出json.此方法比较常用. @RequestBody 与 @ResponseBody ● @RequestBody:接收用户传入json串转成pojo 用于读取http请求的内容(字符串),通过Springm

ASP.NET MVC 4 中的JSON数据交互

前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 return Content("{\"id\":\"1\",\"name\":\"A\"}"); 为了严格符合Json数据格式,对双引号进行了转义. 使用JavaScriptSerialize.Serialize()方法将对象序列化为JSON格式的字符串 MSDN 例如我们有一个匿名对象: var tempObj=new

springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修改工程名,如下图: 1.1.2. 绑定数组 需求 在商品列表页面选中多个商品,然后删除. 需求分析 功能要求商品列表页面中的每个商品前有一个checkbok,选中多个商品后点击删除按钮把商品id传递给Controller,根据商品id删除商品信息. 我们演示可以获取id的数组即可 Jsp修改 修改i

ajax 发送json数据时为什么需要设置contentType: &quot;application/json”

1. ajax发送json数据时设置contentType: "application/json"和不设置时到底有什么区别? contentType: "application/json",首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配.同时,对应的后端如果使用了Spring,接收时需要使用@Req

ajax发送json数据时为什么需要设置contentType: &quot;application/json”

1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/json”,首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配.同时,对应的后端如果使用了Spring,接收时需要使用@RequestBody来注解