前端交互,前端与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" } }