使用ajax发送post请求（切换图片）

最新推荐文章于 2024-07-19 13:30:48 发布

可乐爆米花

最新推荐文章于 2024-07-19 13:30:48 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 前端端端端端端

本文链接：https://blog.csdn.net/william_jzy/article/details/80559889

版权

前端端端端端端同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>切换图片</title>
	<style type="text/css">
		body{
			text-align: center;
		}
		#img{
			width: 220px;
			height: 220px;
			border: 1px solid #000;
			margin: 0 auto;

		}
		#text{
			width: 220px;
			height: 100px;
			border: 1px solid #000;
			margin: 10px auto;
		}
	</style>
</head>
<body>
	<h1>切换图片</h1>
	<div id="img">

	</div>
	<div id="text"></div>

	<input type="button" class='starBtn' value='海贼王'  data-star='onePiece'>
    <input type="button" class='starBtn' value='李彦宏' data-star='lyh'>
    <input type="button" class='starBtn' value='马云' data-star='my'>


	<script type="text/javascript">
		
			var btns = document.querySelectorAll(".starBtn");

			// 绑定事件
			for(var i = 0; i <btns.length; i++){
				btns[i].onclick = function(){

					var ajaxObj = new XMLHttpRequest();

					ajaxObj.open("post","04changeimg.php");

					ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
					
					ajaxObj.send('starName='+this.dataset['star']);

					ajaxObj.onreadystatechange = function(){
						if(ajaxObj.readyState==4&&ajaxObj.status==200){
							//
							console.log(ajaxObj.responseText);
							//截取字符串
							var starArr = ajaxObj.responseText.split("|");

							//console.log(starArr);

							document.querySelector("#img").style.background = 'url('+starArr[0]+') no-repeat center/cover ';

							document.querySelector("#text").innerHTML = starArr[1];
						}

					};
				};
			}
	</script>
</body>
</html>

php代码

<?php
	header('content-type:text/html;charset=utf-8');
	$imginfo = array(
				'onePiece' => array('img/onePiece.jpg','我是要做海贼王的男人！' ),
				'lyh' => array('img/liyanhong.jpg','我是百度背后的男人！'),
				'my' => array('img/mayun.jpg','我是淘宝背后的男人！')
				);

	$key = $_POST['starName'];
	$name = $imginfo[$key];

	$pic = $name[0];
	$text = $name[1];
	
	echo $pic;
	// 进行分割，方便截取字符串
	echo "|";
	echo $text;

?>