ajax从后台获取信息并显示,Ajax小案例之获取后台信息显示

ajax信息传递.gif

知识点：数据传输--------json

jquery-----------

.ajax()获取**

html部分 注意设置name属性 通过name属性从json数据中得到相应的信息

商品标题名称

商品描述信息

女装

包包

拖鞋

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

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

知识点：要实现从 JSON 转换为对象，使用 JSON.parse() 方法：

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