JSON 其实没有那么难！！！

最新推荐文章于 2022-10-12 14:48:09 发布

帅帅邬同学

最新推荐文章于 2022-10-12 14:48:09 发布

阅读量285

点赞数 5

分类专栏： jQuery 学习笔记服务器与AJAX 文章标签： json js ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_44586544/article/details/106025757

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

什么是 JSON ？

1. JSON: JavaScript Object Notation(JavaScript 对象表示法)

2. JSON 是存储和交换文本信息的语法。类似 XML。

3. JSON 比 XML 更小、更快，更易解析。

示例：

{
  "name": "zhansan",
  "age": 12,
  "lover": [
    "coding",
    "swimming",
    "singing"
  ],
  "friend": {
    "high": "180cm",
    "weight": "80kg",
    "lover": [
      "swimming",
      "singing",
      "dancing"
    ],
    "friend": {}
  }
}

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

1. 数据在名称/值对中
2. 数据由逗号分隔
3. 大括号保存对象
4. 中括号保存数组

小试牛刀

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
    // 对象
    /*
    json数据和普通的js对象的区别：
    1、json数据没有变量
    2、json形式的数据结尾没有分号
    3、json数据中的键必须用双引号包住
    */
    // var obj = {
    //     name: 'zhangsan',
    //     age : 12,
    //     lover : ['coding','singing','dancing'],
    //     friend : {
    //         high : '180cm',
    //         weight : '80kg'
    //     }
    // };

    // var str = '{"name":"zhangsan","age":"12"}';
    // var obj = JSON.parse(str); //把json形式的字符串转成对象

    // var str1 = JSON.stringify(obj); //把对象转成字符串
    // console.log(str1); //{"name":"zhangsan","age":"12"}


    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // readyState=0表示xhr对象创建完成
        // 2、准备发送
        var param = 'username=' + uname + '&password=' + pw;
        // xhr.open('post','data.json',true);
        xhr.open('post', '07.php', true);
        // 3、执行发送动作
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              console.log(data, typeof data)
              // var data = JSON.parse(data);
              // // console.log(data[0],data[1],data[2]);
              // console.log(data.name1);
              // console.log(data.name2);
              // console.log(data.name3);
              // var d = eval("(" + data + ")");//eval的作用就是把字符串解析成js代码并执行
              // var d = JSON.parse(data);
              // console.log(d.name);
              // console.log(d.age);
              // console.log(d.friend.high);
              // console.log(d.friend.weight);
              // console.log(d.friend.lover);

              // var tag = '<div><span>'+d.name+'</span><span>'+d.age+'</span><span>'+d.lover+'</span><span>'+d.friend.high+'</span></div>';
              // document.getElementById("showInfo").innerHTML = tag;
            }
          }
        }

      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
  <div id="showInfo"></div>
</body>

</html>

PHP代码：

<?php

// echo '{"username":"zhangsan","age":"12"}';
// --------------------------------------------------
// $uname = 'wangwu';
// $age = '13';
// echo '{"username":"'.$uname.'","age":"'.$age.'"}';
// --------------------------------------------------
// json_encode() 作用：就是把数组转化成json形式的字符串
// $arr = array(1,2,3);
// $arr = array("tom","jerry","spike");
$arr = array("name1" => "tom", "name2" => "jerry", "name3" => "spike");
$str = json_encode($arr);
echo $str;

如果这篇文章能够帮助到你，希望您不要吝惜点赞，您的支持是我继续努力的动力！！！

帅帅邬同学

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JSON 其实没有那么难！！！

什么是 JSON ？1. JSON: JavaScript Object Notation(JavaScript 对象表示法)2. JSON 是存储和交换文本信息的语法。类似 XML。3. JSON 比 XML 更小、更快，更易解析。示例：{ "name": "zhansan", "age": 12, "lover": [ "coding", "swimming", "singing" ], "friend": { "high": "180
复制链接

扫一扫