html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.showBox{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="showBox"></div>
<input type="button" value=‘彭于晏‘ data-name = ‘pyy‘>
<input type="button" value=‘周董‘ data-name = ‘jay‘>
<input type="button" value=‘陈老师^_^‘ data-name = ‘cgx‘>
</body>
</html>
<script type="text/javascript">
var btns = document.querySelectorAll(‘input‘);
// 循环绑定点击事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(){
// 创建
var ajax = new XMLHttpRequest();
// 修改 url的值 01.changeImg.php?starName =
// 获取 data-自定义属性
console.log(this.dataset.name);
// 设置
ajax.open(‘get‘,‘01.changeImg.php?starName=‘+this.dataset.name);
// 发送
ajax.send();
// 注册
ajax.onreadystatechange = function(){
if(ajax.readyState==4 &&ajax.status==200){
// 判断并使用
console.log(ajax.responseText);
// 设置 展示div的 background属性
document.querySelector(‘.showBox‘).style.background = ‘url(‘+ajax.responseText+‘) no-repeat center/cover‘;
}
}
}
};
</script>
PHP部分：
<?php
// 获取提交的数据 明星数据 key
$starKey = $_GET[‘starName‘];
// 关系型数组 key->value
$starArr = array(
‘pyy‘=>‘img/pyy.jpg‘,
‘jay‘=>‘img/jay.jpg‘,
‘cgx‘=>‘img/cgx.jpg‘
);
// echo value
// 通过key 获取对应的 value
echo $starArr[$starKey];
?>
时间： 2024-10-21 02:00:13