json语法和用法

天晓蓝

已于 2023-07-21 21:39:01 修改

阅读量50

点赞数

文章标签： json javascript 开发语言

于 2023-07-21 20:41:52 首次发布

本文链接：https://blog.csdn.net/weixin_45555153/article/details/131859899

版权

文章介绍了JSON的基本语法，包括键值对、数据类型和结构。展示了如何在JavaScript中创建和操作JSON对象，以及JSON对象与字符串之间的转换。同时，文章提到了在服务器端使用Fastjson进行JSON处理，包括从HTTP请求中解析JSON字符串到Java对象，以及将Java对象转换成JSON响应给浏览器。

摘要由CSDN通过智能技术生成

页面端json的使用

1、json语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json数据格式或语法</title>
</head>
<body>
<!--
JSON:JavaScript对象表示法，是一种轻量级的数据格式交换格式
Json采用完全独立于语言的文本格式，支持很多语言，使得json成为了独立的数据交换格式
-->
<script>
    //一般写的js对象
    var user={
        name:"章北海",
        age:"34",
        city:"昆明"
    }

    /*
    * json的定义：json由键值对组成，并且由大括号将键值对引起来
    * 键值对用冒号隔开，多个键值对之间用逗号隔开，键使用双引号引起来,
    * 注意：json格式的键和值都不能使用单引号，而js对象的值可以双引号
    * */
    //json格式的对象
    var userj={
        "name":"章北海",
        "age":34,
        "city":"昆明"
    }

    //json可以包含很多类型的数据而且可以很复杂，值可以是数字，Boolean类型，字符串，数组，对象，null等
    var jsonobject={
        "key1":9987,
        "key2":"strings",
        "key3":true,
        "key4":[1,true,"ss"],
        "key5":{
          "key51":51,
          "key52":52
        },
        "key6":[
            {"key61":61, "key62":612},
            {"key63":51, "key64":642},
            {"key65":51, "key66":52}]
    }
    //获取
    jsonobject.key1;
    jsonobject.key4[1];
    jsonobject.key5.key51;
    jsonobject.key6[1].key64;
</script>
</body>
</html>

2、json常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json常用方法</title>
</head>
<body>
<script>
  /*
  json的数据存在有两种形式：
  1.以对象形式存在，称为json对象，在js中使用方便获取和操作
  2.以字符串形式存在，称为json字符串，客户端与服务器数据传输时使用
   */

  //对象
  var jsonobj={"name":"zs", "age":19, "city":"昆明"}
  //js提供了将对象转为字符串的方法
  var jsonst=JSON.stringify(jsonobj);

  //json字符串
  var jsonstr='{"name":"zs", "age":19, "city":"昆明"}';

  //js提供了将字符串转为对象的方法
  var obj=JSON.parse(jsonstr);


  //注意：原生的js我们可以手动转换，
  // 但在ajax的框架中（如axios，jQuery）在浏览器传输数据到服务器时会自动把对象转为字符串，
  // 服务器传输到浏览器时会自动把字符串转为对象
</script>
</body>
</html>

服务器端json的使用：fastjson（导入fastjson包）

1.jsonhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fastjson</title>
    <script src="js/axios-0.18.0.js"></script>
  <script>
    //通过ajax发送一个带有js对象或json对象的请求到服务器
    axios.post("http://localhost:8080/web13/json01?", {"username": "章北海", "age":19}).then(function (resp){
        document.body.innerText=resp.data.username;//axios请求完后会将传输过来的json字符转为对象
    })
  </script>
</head>
<body>

</body>
</html>

2、后端Servlet程序

package web;

import com.alibaba.fastjson.JSON;
import entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;

/**
 * @Author ZRX
 * @Date 2023/7/21 11:20
 * @Description
 * @Version
 */
@WebServlet("/json01")
public class JsonServlet01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("uTF-8");



        //get请求
        //String name=req.getParameter("username");
        //System.out.println("name = " + name);


        //post请求参数是以请求体的方式传入
        //在这里如果post请求传递数据的时候直接传入字符串（如data："username=章北海")，则可以通过通用方法获取
        //但如果传的是js对象或json对象的json字符串如：data: {"username" : "章北海","age":19},则要用字符流的getReader方法读取

        BufferedReader reader = req.getReader();
        String s= reader.readLine();

        //将json字符转为java实体对象
        User user= JSON.parseObject(s,User.class);
        System.out.println("user = " + user);

        //将java对象转为json字符串,响应给浏览器
        String s1=JSON.toJSONString(user);
        System.out.println("s1 = " + s1);
        //注意响应格式变化 html-->json
        resp.setContentType("text/json;charset=utf-8");
        //将字符串响应给浏览器
        resp.getWriter().write(s1);


    }
}