知識點：資料傳輸--------json
jquery----------- $\mathrm{.}ajax\left(\right)\ast \ast$

原 理 ： s o n 的 數 據 使 用 p h p f i l e g e t

c o n t e n t s ( ) 方 法 在 後 臺 獲 取 到 在 前 臺 使 用 .ajax() **原理：son的資料 使用php file_get_contents()方法在後臺獲取到 在前臺使用 .ajax()獲取**
html部分 注意設定name屬性 通過name屬性從json資料中得到相應的資訊

<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>

jq程式碼部分

$(function (){
        //獲取元素
        var title=$("#title");
        var des=$("#des");
        var img=$("img");
        var btn =$("button");
        //新增按鈕的點選事件
       btn.click(function () {
           var self=$(this);
           $.ajax({
               type:"get",
               url:"10-ajax-json-proj.php",
               success:function (xhr) {
                    var name=self.attr("name");
                    var obj=JSON.parse(xhr);
                    var subObj=obj[name];
                    title.html(subObj.title);
                    des.html(subObj.des);
                    img.attr("src",subObj.image);
               }
           })
       })
    })

後臺獲取json資料

<?php
echo file_get_contents("10-ajax-json-proj.txt");

知識點：要實現從 JSON 轉換為物件，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}