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 深拷贝 和 浅拷贝

    1.  ...运算符  (浅拷贝) let obj = {a:1,b:2}; let obj2 = {...obj}; obj.a=3 obj //{a: 3, b: 2} obj2 //{a: 1, ...

  2. 记——flask实现全文搜索

    参考: flask入门和进阶十(实现全文搜索)已解决:https://blog.csdn.net/chengmo123/article/details/100552287 一.首先安装flask-wh ...

  3. CSS边框（实线、虚线、破折号）

    1.CSS边框 border:1px solid red; /*实线*/ border:1px dotted red; /*虚线*/ border:1px dashed red; /*破折号*/

  4. python机器学习——BP（反向传播）神经网络算法

    背景与原理: BP神经网络通常指基于误差反向传播算法的多层神经网络,BP算法由信号的前向传播和反向传播两个过程组成,在前向传播的过程中,输入从输入层进入网络,经过隐含层逐层传递到达输出层输出,如果输出 ...

  5. logic and control

    logic and control 程序的本质 Programs = Data Structures + Algorithms Algorithm = Logic + Control CPU 的构成 ...

  6. mysql大小写无法区分问题

    1.在创建表时设置编码格式 ALTER TABLE `test`.`t_test` COLLATE=utf8mb4_bin; 只能在建表或者没有数据时设置. 还有其他比如改字段格式,比如将varcha ...

  7. tensorflow2.0和之前版本读取模型的接口变化

    tensorflow2.0 c++加载模型可以用接口LoadSavedModel: SessionOptions opts;     tensorflow::RunOptions run_option ...

  8. 注释中的Unicode编码也会被转义

    现象 public class Unicode { public static void main(String[] args) { // \u000d System.out.println(&quo ...

  9. hdu1710 二叉树(C/C++)

    hdu1710 题目地址:https://acm.dingbacode.com/showproblem.php?pid=1710 (最近几天杭电原网址开不进去了,之后应该可以通..吧) Binary ...

  10. Codeforces Round #843 (Div. 2) Problem C

    C. Interesting Sequence time limit per test 1 second memory limit per test 256 megabytes input stand ...