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. element ui修改文本框高度以及图标不居中的问题

    .el-input__inner{ height:30px !important; .el-input__icon{ line-height: 24px !important; } .el-range ...

  2. python菜鸟学习： 3.浅copy使用场景

    # -*- coding: utf-8 -*-import copy# 浅copy# 使用场景,比如A,B夫妻共有一个银行账户,存取马宁的数据username = ["name", ...

  3. D. Steps to One

    题意 初始有一个空数组\(a\),接下来每次操作会这么做: 在\([1,n]\)中选择一个数,将其拼接在数组\(a\)后. 计算数组\(a\)的\(\gcd\). 如果结果是\(1\),退出. 否则, ...

  4. springsecurity 配置swagger

    最近在学习springsecurity 安全框架,具体是什么概念在这里不一一赘述了.下面呢,咱们一起搭建一下简单的springsecurity swagger 项目感受一下. 首先初始化spring ...

  5. 运行代码后出现Process finished with exit code 0

    pycharm_运行不出结果,也不报错_Process finished with exit code 0用pycharm运行程序的时候,运行不出结果 ,也不报错,且正常退出解决1:将 run → e ...

  6. iOS 制作本地库Development Pods

    1.cd到指定的路径文件夹下 ,创建本地库,如:pod lib create XXNetworking 2.删除Classes文件下的ReplaceMe文件,添加自己的类. 3.修改XXNetwork ...

  7. esxi 6.7手动安装阵列卡驱动（）2023-01.03

    一.登录vmware后台在兼容性列表里面查找驱动,https://www.vmware.com/resources/compatibility/search.php 二. 下载对应的驱动https:/ ...

  8. 通用CSS命名惯例

    通用的 CSS 命名惯例 在参与规模庞大.历时漫长.且参与人数众多的项目时,要确保每一行代码都像是同一个人编写的:这就要求所有开发者,都遵守相同的代码规范.在先前的文章前端项目开发规范意见,从宏观角度 ...

  9. vue中关于get传参数为数组的解决方法

    按理来说,get请求方式是没有数组的,get请求方式带参数都是字符串,需要和后端协商是用某个标识符分割开,例如"|"   ",". 当然如果需要数组的话,也能解 ...

  10. <canvas>标签画登陆页鼠标滑过效果

    canvas 标签画登陆页鼠标滑过效果 如需js请留言.JS在个人博客日记中. <!DOCTYPE html> <html lang="en"> <h ...