学习后 做了一个练习 就是简单的点击按钮 切换图片和字 哎哟 这个布局 浪费这个事件
就是 PHP后端写了一个结果集 前端 点击按钮 通过Ajax 获得然后前台做处理 很简单 的一个小功能
不要因为功能简单小就不做 很多复杂的功能都是一个个小功能的超集合
AJax 就是自己写的封装类
https://blog.csdn.net/q465162770/article/details/100590494
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="JS/jquery-1.4.1.js"></script> -->
<style>
*{
position: 0;
margin: 0;
}
.p
{
width: 300px;
height: 350px;
margin: 100px auto;
}
.content
{ overflow:hidden;
width: 300px;
height: 250px;
border: 1px solid black;
}
.content>img
{
overflow:hidden;
width: 300px;
height: 300px,
}
p
{
text-align: center;
width: 300px;
height: 20px;
}
</style>
<script src="JS/Ajax.js" ></script>
<script>
window.οnlοad=function()
{
// console.log("ssss");
var bt = document.querySelectorAll("button");
var P1 = document.getElementById("text1");
var P2= document.getElementById("text2");text2
var img = document.querySelector("img");
for (var key in bt) {
bt[key].onclick = function()
{
ajax({
type: "GET",
url: "Ajax.php",
data: {"name":this.getAttribute("name")},
success: function(msg){
var array= msg.split("|");
// console.log(array);
P1.innerHTML=array[0];
P2.innerHTML=array[2];
img.setAttribute("src",array[1]);
},
error: function(msg){
alert( msg );
}
});
}
}
}
</script>
</head>
<body>
<div class="p">
<P id="text1"></P>
<div class="content"><img ></div>
<P id="text2"></P>
<button name="but1"> button1</button>
<button name="but2"> button2</button>
<button name="but3"> button3</button>
</div>
</body>
</html>
<?PHP
// sleep(5);
// print_r($_POST["userName"]);
// echo "<br>";
// print_r($_POST);
// echo $_GET['name'];
// echo $_POST['Password'];
$list =array("but1"=>array("text1"=>"哦啦啦啦","image"=>"source/1.jpg","text2"=>"嘿嘿嘿1"),
"but2"=>array("text1"=>"哦啦啦啦22222","image"=>"source/2.jpg","text2"=>"222222"),
"but3"=>array("text1"=>"哦啦啦啦33333","image"=>"source/3.jpg","text2"=>"嘿嘿嘿3333333")
) ;
$content=$list[$_GET['name']];
// print_r($content) ;
echo $content['text1'];
echo"|";
echo $content['image'];
echo"|";
echo $content['text2'];
?>