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. golang 解决 socket: too many open files， 以及 too many open files

    同事写的一段代,码业务场景:需要多次GET请求一个三方服务的http 接口,获取数据后写入文件.发现有部分文件没有写入.查看日志出现了报错"socket: too many open fil ...

  2. 实验： spring-boot 整合 fluent-mybatis 实验过程！！！！

    1.参考: 简单整合,会报错误 https://segmentfault.com/a/1190000040467885?utm_source=sf-similar-article 利用maven编译, ...

  3. S家lic

    1,用1patch里对应的工具patch 2019的s家的工具2,用ocad里的lmgrd和snpslmd替换s家的scl里的3,用scl_keygen产生license,再用fix.bat,添加si ...

  4. 「NOTE」常系数齐次线性递推

    要不是考到了,我还没发现这玩意我不是很会-- # 前置 多项式取模: 矩阵快速幂. # 常系数齐次线性递推 描述的是这么一个问题,给定数列 \(c_1,c_2,\dots,c_k\) 以及数列 \(f ...

  5. python菜鸟学习： 7. 购物车升级版，用户、商品信息存储，修改，新增

    # -*- coding: utf-8 -*-import os'''用户入口:1. 商品信息存在文件里2. 已购商品,余额记录商家入口1. 可以添加商品,修改商品价格商品信息:commdList.t ...

  6. Templates && Algorithms

    -[]基础算法 -[]递推和递归 -[]排序算法 -[]高精度,压位 -[]分治 -[]二分 -[]三分 -[]搜索算法 -[]简单搜索 -[]哈希和状态保存 -[]双向bfs -[]启发式搜索和DS ...

  7. Encountered unexpected token: "ur" <K_ISOLATION>

    在用mybatis-plus的过程中 , 报如下错误 : Caused by: net.sf.jsqlparser.parser.ParseException: Encountered unexpec ...

  8. 解决element-ui表格字段用expand展开行时其他字段也会同时展开的问题

    使用element-ui的table表格时,我们通常会在需要展开的列上通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,但是渲染结果会出现其他未 ...

  9. HTML悬浮div

    需求,html底部为地图,上层是各个div HTML<body> //地图 <div id='map' id="demo1"></div> &l ...

  10. Python pexpect 库的简单使用

    一.Python pexpect 库的使用 在终端中许多命令都有与用户交互的场景,例如切换用户时需要手动输入密码,安装应用有时要输入默认配置等.这对 shell 自动化脚本十分不便.expect 命令 ...