JS-JSON

最新推荐文章于 2024-03-05 10:38:31 发布

rfalcon

最新推荐文章于 2024-03-05 10:38:31 发布

阅读量121

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/rfalcon/article/details/106000179

版权

JS 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

JS学习笔记

json、xml 数据传输格式（字符串的一种格式）
前端 —json/xml—> 后端

前端	运输	后端
数据结构	字符串	数据结构

JSON对象

前端 <==> 运输
- JSON.stringify() 数据结构 => 字符串
- JSON.parse() json格式字符串 => 数据结构
后端 <==> 运输
- json_encode() 将数据结构转成字符串
- json_decode() 将字符串转成对应的数据结构

//数组转字符串
var arr = [100,true,"hello"];
var str = JSON.stringify(arr);
alert(arr);
alert(str);//'[100,true,"hello"]'

//字符串转数组
var str = '[100,true,"hello"]';
var arr = JSON.parse(str);
alert(arr[1]);//true

//对象转字符串
var obj = {
	username:"falcon",
	age:10,
	password:"123"
};
var str = JSON.stringify(obj);
alert(obj);
alert(str);//'{"username":"falcon","age":18,"password":"123"}'

//字符串转对象
var str = '{"username":"falcon","age":18,"password":"123"}';
var obj = JSON.parse(str);
alert(obj.username);//falcon

前后端交互例子

<?php
	header('content-type:text/html;charset="utf-8"');
	error_reporting(0);
	//$arr1 = array('falcon','lily','alice');
	$arr2 = array('username'=>'falcon','age'=>18);
	//echo json_encode($arr1);
	echo json_encode($arr1);
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /* 
        前后端交互流程：
            1.通过Ajax下载数据
            2.分析数据，转成对应的数据结构
            3.处理数据
         */
      window.onload = function () {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
          $ajax({
            method: "get",
            url: "get.php",
            success: function (result) {
              //alert(result);
              /* var arr = JSON.parse(result);
                        for(var i=0;i<arr.length;i++){
                            alert(i+","+arr[i]);
                        } */
              var obj = JSON.parse(result);
              alert(obj.username);
            },
            error: function (msg) {
              alert(msg);
            },
          });
        };
      };
    </script>
  </head>
  <body>
    <button id="btn1">下载数据</button>
  </body>
</html>