前端交互，前端与php后台 Ajax 进行数据交互的三种数据形式(3)-json

html代码：

        <div>
            <p id="title">商品标题名称</p>
            <img src="" alt="">
            <p id="des">商品描述信息</p>
            <button name="nz">女装</button>
            <button name="bb">包包</button>
            <button name="tx">拖鞋</button>
        </div>

js:

<script>
        window.onload = function (ev) {
            // 1.获取需要设置的元素
            var oTitle = document.querySelector("#title");
            var oDes = document.querySelector("#des");
            var oImg = document.querySelector("img");
            // 2.获取所有按钮
            var oBtns = document.querySelectorAll("button");
            // 3.给按钮添加点击事件
            oBtns[0].onclick = function () {
                var self = this;
                // 4.发送Aajx请求到服务器
                ajax({
                    type:"get",
                    url:"10-ajax-test.php",
                    data:{"name":this.getAttribute("name")},
                    timeout: 3000,
                    success: function (xhr) {
                        console.log(xhr);
                        var name = self.getAttribute("name");
                        var str = xhr.responseText;

                 /*JSON.parse()

                                 JSON 通常用于与服务端交换数据。

                                 在接收服务器数据时一般是字符串。

                                 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。*/

var obj = JSON.parse(str);
                        // console.log(obj);
                        var subObj = obj[name];
                        // console.log(subObj);
                        oTitle.innerHTML = subObj.title;
                        oDes.innerHTML = subObj.des;
                        oImg.setAttribute("src", subObj.image);
                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });
            }
            oBtns[1].onclick = function () {

            }
            oBtns[2].onclick = function () {

            }
        }
    </script>

php:

<?php

echo file_get_contents("10-ajax-test.txt");

json.text 数据格式

{
    "nz":{
        "title":"甜美|女装",
        "des":"人见人爱,花间花开,甜美系列",
        "image":"images/1.jpg"
    },
    "bb":{
        "title":"奢华驴包",
        "des":"送女友,送情人,送学妹,一送一个准系列",
        "image":"images/2.jpg"
    },
    "tx":{
        "title":"键盘拖鞋",
        "des":"程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有",
        "image":"images/3.jpg"
    }
}