Ajax简单案例

最新推荐文章于 2024-08-27 13:38:21 发布

zichuanhuo221

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量209

点赞数

文章标签： javascript ajax

本文链接：https://blog.csdn.net/zichuanhuo221/article/details/53912542

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<style>
*{margin:0; padding:0;}
#container{width:1000px;margin:auto;}
.box{width:200px;padding:5px;border:#ccc solid 1px; border-radius:8px;margin-left:5px;float:left;}
img{width:200px;height:200px;border-radius:5px;display:block;}
.box:hover{border:red solid 1px;}
</style>
</head>
<body>
<div id="container">

</div>
<script>
// 页面打开的时候，就加载服务器上接收到的数据【商品】
window.onload = function() {
getJson();
}

/**
* 通过Ajax获取JSON数据
* 核心：Ajax
*/
function getJson() {
// 1.创建对象
var http;
if(window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else {
http = new ActiveXObject("Microsoft.XMLHTTP");// IE低版本
}

// 2. 处理数据
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200){
var jsonStr = http.responseText;// 接收到的是字符串
var json = JSON.parse(jsonStr);
// 处理数据
//console.log(jsonStr);
//console.log(json);
loadGoods(json);// 调用loadGoods函数加载json数据中的商品
}
}

// 3. 发送请求
http.open("POST", "goodslist.php", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send();
}
/**
* 将json数据对应的商品，添加到网页上
* 核心：DOM操作
*/
function loadGoods(jsonData) {

for(var i = 0; i < jsonData.length; i++) {
// 创建div.box标签
var _box = document.createElement("div");
_box.className = "box";

// 创建img标签
var _img = document.createElement("img");
_img["src"] = jsonData[i].image;

// 创建p标签——商品名称
var _pname = document.createElement("p");
_pname.textContent = "商品名称：";
var _spanname = document.createElement("span");
_spanname.textContent = jsonData[i].name;
_pname.appendChild(_spanname);

// 创建p标签——商品单价
var _pprice = document.createElement("p");
_pprice.textContent = "商品单价：￥";
var _spanprice = document.createElement("span");
_spanprice.textContent = jsonData[i].price;
_pprice.appendChild(_spanprice);

// 将所有的标签，整合，并追加到container的子标签中
_box.appendChild(_img);
_box.appendChild(_pname);
_box.appendChild(_pprice);

// 将商品追加到container中
var container = document.getElementById("container");
container.appendChild(_box);
}
}
</script>
</body>
</html>

zichuanhuo221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax简单案例

商品列表 *{margin:0; padding:0;} #container{width:1000px;margin:auto;} .box{width:200px;padding:5px;border:#ccc solid 1px; border-radius:8px;margin-left:5px;float:left;}
复制链接

扫一扫