JSON（JavaScript对象表示法）

首先，我们需要知道的是，要使用json语法的话，就需要在Maven项目中导入相关的包，可以参考我之前发过的那个Maven导包那个网址，在里面找到这个页面：

或者，可以直接点击这里进行跳转：https://mvnrepository.com/artifact/com.alibaba/fastjson/1.2.59

然后将相关的导包导入到项目里面去即可

JSON在html中的基础语法：

将Java对象转为json字符串

//java对象转为json对象

        User user=new User();

        user.setUsername("zhangsan");

        user.setPassword("123456");

        user.setId(123456);

        String JsonString=JSON.toJSONString(user);

        System.out.println(JsonString);

将json字符串转为java对象

//json对象转为java对象

        User u=JSON.parseObject("{\"id\":1,\"username\":\"zhangsan\"password\":\"123456}",User.class);

        System.out.println(u);

案例（使用Axios+JSON实现列表数据的查询和添加）:

//selectAllServlet.java

@Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        List<User> list=us.selectAll();

        //转化为JSON对象

        String jsonString= JSON.toJSONString(list);

        resp.setContentType("text/json;charset=utf-8");

        resp.getWriter().write(jsonString);

    }

结果出来啦！（一定要将导包导入工件嗷！）



后端代码基本形式等同mybatis里面的应用

说明后端代码没问题！

前端代码：

<body>

<table id="brandTable">

    <tr align="center">

        <td>1</td>

        <td>刘紫锦</td>

        <td>20214063</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>

    </tr>

    <tr align="center">

        <td>2</td>

        <td>刘奕辰</td>

        <td>20214065</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>

    </tr>

</table>

<script src="js/axios.min.js"></script>

<script>

window.load=function() {

    axios({

        method:"get",

        url:""

    }).then(function(resp){

        //获取数据

        let users=resp.data;

        let tableData="<tr>\n"+

            "<th>id</th>\n"+

            "<th>username</th>\n"+

            "<th>password</th>\n"+

            "</tr>";

        for(let i=0;i<users.length;i++){

            let user=users[i];

            tableData+="<tr align=\"center\">\n"+

                "<td>"+user.id+"</td>\n"+

                "<td>"+user.username+"</td>\n"+

                "<td>"+user.password+"</td>\n"+

                "\n"+

                "<td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>"+

                "</tr>";

        }

        document.getElementById("brandTable").innerHTML="tableData";

    })

}

</script>

</body>

最后只是这样的一个效果啦！

新增案例（添加）：

需要注意到的是，在后端，

req.getParameter();//是无法接收JSON数据的

所以，需要将JSON对象先转换成BufferedReader类型，然后再利用JSON对象转为java数据的方法，将其转换为字符串输出即可-->可行：

点击提交，即在控制台显示出上述界面

下面是html文件中的添加操作

<center>

  <form action="" method="post">

    <tr>

      <td>序号：</td>

        <td><input type="text" name="id" id="id"></td>

    </tr>

      <p>

      <tr>

          <td>用户名：</td>

          <td><input type="text" name="name" id="name"></td>

      </tr>

      <p>

      <tr>

          <td>密码：</td>

          <td><input type="text" name="password" id="password"></td>

      </tr>

      <p>

      <tr>

          <input type="button" id="btn" value="提交">

      </tr>

  </form>

</center>

<script src="js/axios.min.js"></script>

<script>

    //选择使用异步交互提交表单内容，需要给按钮绑定一个单击事件

    document.getElementById("btn").onclick=function(){

        //将表单数据转为JSON

        var formData={

            id:"",

            username:"",

            password:""

        }

        //获取表单数据

        let id=document.getElementById("id").value;

        formData.id=id;

        //获取表单数据

        let username=document.getElementById("username").value;

        formData.username=username;

        //获取表单数据

        let password=document.getElementById("password").value;

        formData.password=password;

        //发送ajax请求

        axios({

            method:"post",

            url:"http://localhost:8080/ttCookieLogin_war_exploded/ADDServlet",

            data:{formData}

        }).then(function(resp){

            //判断响应数据是否为success

            if(resp.data=="success"){

                location.href="http://localhost:8080/ttCookieLogin_war_exploded/axios.html";

            }

        })

    }

</script>

Javaweb基础复习------JSON相关知识的更多相关文章

  1. json相关知识

    整理json相关知识: 1.for in 循环获取json中的键(key)与值(value) <!DOCTYPE html> <html lang="en"> ...

  2. JSON相关知识，转载：删除JSON中数组删除操作

    一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = ...

  3. JSON相关知识整理

    JSON   全称:JavaScript Object Notation ,一种轻量级的数据交换格式 示例:{"name":"eric","age&q ...

  4. json 相关知识

    一:json标准格式: 标准JSON的合法符号:{(左大括号)  }(右大括号)  "(双引号)  :(冒号)  ,(逗号)  [(左中括号)  ](右中括号) JSON字符串:特殊字符可在 ...

  5. Java基础--面向对象以及相关知识

    一. 面向对象特征与原则 1.三大特征:封装.继承.多态. (1)封装:将客观的事物封装成抽象的类,封装代码逻辑,并通过访问控制符来控制访问的方式,从而保护程序(使用反射时,可以获取对象的私有方法和成 ...

  6. JavaWeb基础知识总结

    JavaWeb基础知识总结.   1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供 ...

  7. 浅谈C#中的 async await 以及对线程相关知识的复习

    C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...

  8. 超详细的Java面试题总结（四 ）之JavaWeb基础知识总结

    系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java ...

  9. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  10. JavaWeb基础知识

    一.WEB基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web ...

随机推荐

  1. JS篇(001)-document load 和 document ready 的区别

    答案: 页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待 ...

  2. tomcat的安装以及环境配置

    1.Tomcat的下载地址:http://tomcat.apache.org/ Tomcat是开放源代码的WEB服务器,安装时,只需解压压缩包即可 2.环境变量的配置 1>新建系统变量CATAL ...

  3. Python面向对象编程——一些类定义（杂）

    一.abstractmethod 子类必须全部实现重写父类的abstractmethod方法 非abstractmethod方法可以不实现重写 带abstractmethod方法的类不能实例化 fro ...

  4. 「SOL」序列 (LOJ/NOI2019)

    准备写新博客的时候发现自己草稿箱里还有一篇咕了十几天的题解 思路挂在了费用流之前-- 题面 > Link LOJ #3158 解析 这道题的本质是一个二分图带权匹配的问题,一个经典的做法是直接做 ...

  5. CMD Debug大全

    'service' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 先看环境变量配置是否到位,再使用管理员运行cmd

  6. Vue.js + TypeScript 项目构建 (图形界面构建)

    一,打开图形界面 vue ui 二,创建文件       三,创建成功

  7. maven的下载与安装 win10系统

    1.安装maven的前提是jdk环境要配置好 不然下载jar包的时候会出错 2. Maven软件安装包下载 (推荐官网下载) 官网地址https://maven.apache.org/ 然后 3.下载 ...

  8. ceph 因权重问题导致pgs active+clean+remapped 状态

    1.现象: 2.原因:是因为前期权重调整不合理导致,调整回来就正常了 3.操作步骤: ceph osd crush reweight osd.2 0.98317    # osd 位置. 权重值 权重 ...

  9. 链表反转，C++实现

    1 // To Compile and Run: g++ invert_list.cc -std=c++11 -Wall -O3 && ./a.out 2 3 4 #include & ...

  10. gitbash 本地文件提交为一个新的项目 到 gitlab

    此篇操作的环境: 已经配置好一个本地仓库,且可成功的将本地项目提交到gitlab上的对应的远程仓库. 这意味着此时你的电脑已经安装好git,有一个本地仓库存放你的项目,成功配置好一个对应的远程仓库,且 ...