使用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]; ?>