小demo：ajax+js实现页面内容刷新

通过点击按钮刷新页面内容

原视页面：

点击女装按钮：

使用的是自己封装的ajax get 请求，后台返回json数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				text-align: center;
				color: black;
				font-size: 16px;
			}
			.container{
				background-color:#ccc;
				width: 500px;
				height: 500px;
				margin: 200px auto;
			}
			.container>header{
				background-color: palevioletred;
				width: 100%;
				height: 50px;
				line-height: 50px;
			}
			.container>.content{
				display: block;
				border: 1px solid black;
				width: 300px;
				height: 300px;
				margin: 20px auto 20px;
			}
			.container>.display{
				background-color: palevioletred;
				width: 100%;
				height: 50px;
				line-height: 50px;
			}
			.container>footer{
				height: 50px;
				padding-top: 10px;
			}
			.container>footer button{
				margin-right: 10px;
				padding:5px 10px 5px 10px;
				border-radius: 5px;
				border: none;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>商品标题名称</header>
			<img src="" alt="" class="content">
			<div class="display">商品描述信息</div>
			<footer>
				<button name="close">女装</button>
				<button name="bag">包包</button>
				<button name="shose">拖鞋</button>
			</footer>
		</div>
		<script type="text/javascript" src="./get封装.js"></script>
		<script type="text/javascript">
			var head=document.querySelector("header");
			var display=document.querySelector(".display");
			var content=document.querySelector(".content");
			var Btn=document.querySelectorAll("button");
			
			Btn[0].onclick=function(){
				ajax({
					method:"get",
					// data:{
					// 	"name":this.getAttribute("name")},
					url:"./server.php",
					success:function(xhr){
						
						var res=xhr.responseText;
						
						var resObj=JSON.parse(res);
						head.innerHTML=resObj.close.head;
						display.innerHTML=resObj.close.description;
						content.setAttribute("src",resObj.close.img);
					},
					error:function(res){
						alert("error response");
					},
					timeOut:3000});
			};
		</script>
	</body>
</html>

小demo：ajax+js实现页面内容刷新

猜你喜欢