异步切换头像文字

使用post发送数据，必须设置如下格式
ajax.setRequestHeader(‘Content-type:application/x-www-form-urlencoded’);
如果需要像HTML表单那样post数据，请使用setRequestHeader（）

在这里插入图片描述

 <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.imageBox{
    			width: 200px;
    			height: 200px;
    			border: 1px solid #0094ff;
    			margin: 20px auto;
    		}
    		.infoBox{
    			border:1px solid #0094ff;
    			margin: 20px auto;
    			width: 300px;
    			height: 100px;
    		}
    		body{
    			text-align: center;
    			/* 如果要一行 写完 大小 通过 / 分隔 再写大小 */
    			/* background: url('xxx.jpg') no-repeat center / 200px 200px; */
    			/* background: url('xxx.jpg') no-repeat center / contain; */
    		}
    	</style>
    </head>
    <body>
    	<!-- div.imageBox+div.infoBox+input[type='button' class='starBtn']*3 -->
    	<div class="imageBox"></div>
    	<div class="infoBox"></div>
    	<input type="button" class="starBtn" value='baby'>
    	<input type="button" class="starBtn" value='hxm'>
    	<input type="button" class="starBtn" value='lh'>			
    </body>
    </html>
    <script type="text/javascript">
    	// 为 按钮 绑定 点击事件
    	var btnList = document.querySelectorAll('.starBtn');
    
    	for (var i = 0; i < btnList.length; i++) {
    		btnList[i].onclick = function () {
    			var ajax = new XMLHttpRequest();
    
    			// 使用post
    			ajax.open('post','02.star_image_text.php');
    
    			// 必须要设置 请求报文
    			ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
    			// 发送请求 name=jay
    			ajax.send('name='+this.value);
    
    			// 注册事件
    			ajax.onreadystatechange = function () {
    				if (ajax.readyState == 4 && ajax.status == 200) {
    					// console.log(ajax.responseText);
    
    					// 分隔字符串 根据 竖线
    					var strArr = ajax.responseText.split('|');
    
    					// 确实是数组哦 (⊙o⊙)
    					console.log(strArr);
    
    					// 从数组中 取出 不同的值 设置给 不同的 dom元素即可
    
    					// 背景图片
    					document.querySelector('.imageBox').style.background = 'url('+strArr[0]+') no-repeat center / cover';
    
    					// 描述信息
    					document.querySelector('.infoBox').innerHTML = strArr[1];
    				}
    			}
    		}
    	}
    </script>

服务器端PHP

<?php 
	// 获取 post数据
	$key = $_POST['name'];

	// 获取 一个value 这里使用 关系型数组
	$starArr =array(
		'baby'=>array('images/baby.jpg','Angelababy，中文名杨颖，1989年2月28日出生于上海，中国内地影视女演员、模特'),
		'hxm'=>array('images/hxm.jpg','baby的老公,教主,著名男演员,最近演了一部烂片'),
		'lh'=>array('images/lh.jpg','红魔,傻狍子,小鲜肉,萌萌哒,我家有一副1米的海报')
		);

	// 使用key  获取 对应的value 这里是一个 数组

	$oneStar = $starArr[$key];

	// 将 数组中的 两个 值 都返回给用户
	echo $oneStar[0];

	// 为了 在浏览器分隔方便 这里 添加一个分隔符
	echo '|';

	echo $oneStar[1];

 ?>

异步切换头像文字

猜你喜欢