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. Google Chrome 离线安装包官方下载

    我们参照 Google Chrome帮助中的<下载和安装 Google Chrome>,在这里找到官方最新版离线安装包的下载地址:备用 Chrome 安装程序,历史版本请通过版本号的方式下 ...

  2. SQL 查询各表所占大小

    SELECT OBJECT_NAME(id) tablename , CASE WHEN reserved * 8 > 1024 THEN RTRIM(8 * reserved / 1024) ...

  3. 实时中文语音克隆——开源项目MockingBird体验

    [引子] 在今年大型网络攻防演练前不久,笔者接到一个公司的座机号码来电,上来就问防守准备得怎么样了,哪里还有不足等.等等,这声音不认识,笔者第一反应就是蓝军(Red Team)来进行社会工程攻击,于是 ...

  4. 解决未定义的count键“报错为："Uncaught ReferenceError: count is not defined"

    报错: 源码:Vuex仓库.js let state = {     count } export default state   解决:未赋值的count键

  5. python机器学习——SVM支持向量机

    背景与原理: 支持向量机是一种用来解决分类问题的算法,其原理大致可理解为:对于所有$n$维的数据点,我们希望能够找到一个$n$维的直线(平面,超平面),使得在这个超平面一侧的点属于同一类,另一侧的点属 ...

  6. c++学习1 基础关键词

    一 "const" 修饰变量 只能被初始化和读取,不能被赋值更改,且必需初始化,不初始化的话会因为读取到随机数而报错. example: const int date=100; c ...

  7. mysql 的小问题

    首先按下win+R 执行 services.msc 进入服务,查找到MySQL,点击停止服务,然后在控制台cmd进入本地的MySQL文件夹,我的文件名是mysql-8.0.26-winx64,进入后执 ...

  8. centos7（虚拟机）下安装redis

    centos7(虚拟机)下安装redis 安装 下载redis安装包 wget https://download.redis.io/releases/redis-6.2.1.tar.gz 解压安装包 ...

  9. maven项目资源导出问题

    maven由于他的约定大于配置,我们之后可以能遇到我们写的配置文件,无法被导出或者生效的问题,解决方案: <!--在build中配置resources,来防止我们资源导出失败的问题--> ...

  10. 关于Python文件读取时，默认把\r\n换成\n

    Python在非二进制形式读取文件时,自动把\r\n换成\n.(window下换行是\r\n) 建立一个test1.txt文件, aaaa bbbb 1.在utf8方式下读取 读取四个字符 1 f=o ...