Ajax小案例之获取后台信息显示

ajax信息传递.gif

知识点：数据传输--------json
jquery-----------.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'}