javascript之ajax请求数据demo

最新推荐文章于 2022-05-17 17:43:36 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2022-05-17 17:43:36 发布

阅读量917

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/79052128

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

demo代码如下：

html的demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.imgbox {
			width: 256px;
			height: 170px;
			border: 1px solid #000;
			margin: 20px auto;
		}
		.imgbox img {
			width: 100%;
		}
		.infobox {
			width: 400px;
			height: 100px;
			border: 1px solid #000;
			margin: 20px auto;
		}
		input {
			margin: 20px auto;
		}
		body {
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="imgbox"></div>
	<div class="infobox"></div>
	<input type="button" class="dogbtn" value="1"/>
	<input type="button" class="dogbtn" value="6"/>
	<input type="button" class="dogbtn" value="9"/>
	<script type="text/javascript">
		var btnlist = document.querySelectorAll(".dogbtn");
		for(var i = 0 ; i <= btnlist.length - 1; i++){
			btnlist[i].onclick = function(){
				var ajaxObj = new XMLHttpRequest();
				ajaxObj.open("post","first.php");
				ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				ajaxObj.send('name=' + this.value);
				ajaxObj.onreadystatechange = function(){
					if(ajaxObj.readyState == 4 && ajaxObj.status == 200){
						// 只有一个值返回时
						// document.querySelector(".imgbox").style.background = 'url('+ajaxObj.responseText +') no-repeat center';
						console.log(ajaxObj.responseText.split("|"));
						var content = ajaxObj.responseText.split("|");
						document.querySelector(".imgbox").style.background = 'url(' + content[0] + ') no-repeat center';
						document.querySelector('.infobox').innerHTML = content[1];
					}
				}
			}
		}
	</script>
</body>
</html>

php的demo代码如下：

<?php
	$key = $_POST['name'];
	$starArr = array(
			'1' => array('1.jpg','我是狗狗1号'),
			'6' => array('6.jpg','我是狗狗2号'),
			'9' => array('9.jpg','我是狗狗3号')
		);
	// 下面是只返回一个值时的代码
	// $value = $starArr[$key];
	// echo $value;
	// 返回多个属性值的代码
	// 使用能够key获取对应的元素
	$onedog = $starArr[$key];
	// 将数组中的两个值都返回给用户
	echo $onedog[0];
	// 为了在浏览器分割方便，在这里添加一个分割符
	echo '|';
	echo $onedog[1];
?>