ajax切换明星头像！

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.showBox{width: 200px;height: 200px;margin: 100px auto;border: 1px solid gray;}</style>
</head>
<body><div class="showBox"></div><input type="button" value='彭于晏' data-name = 'pyy'><input type="button" value='周董' data-name = 'jay'><input type="button" value='陈老师^_^' data-name = 'cgx'>
</body>
</html>
<script type="text/javascript">var btns =  document.querySelectorAll('input');//  循环绑定点击事件for (var i = 0; i < btns.length; i++) {btns[i].onclick = function(){// 创建var ajax = new XMLHttpRequest();// 修改 url的值 01.changeImg.php?starName =// 获取 data-自定义属性
             console.log(this.dataset.name);// 设置
             ajax.open('get','01.changeImg.php?starName='+this.dataset.name);// 发送
             ajax.send();// 注册
             ajax.onreadystatechange = function(){if(ajax.readyState==4 &&ajax.status==200){// 判断并使用
                     console.log(ajax.responseText);// 设置 展示div的 background属性
                     document.querySelector('.showBox').style.background = 'url('+ajax.responseText+') no-repeat center/cover';}}}};
</script>

PHP部分：

<?php // 获取提交的数据 明星数据 key$starKey =  $_GET['starName'];// 关系型数组 key->value$starArr = array('pyy'=>'img/pyy.jpg','jay'=>'img/jay.jpg','cgx'=>'img/cgx.jpg');// echo value// 通过key  获取对应的 valueecho $starArr[$starKey];?>

转载于:https://www.cnblogs.com/famensaodiseng/p/6265511.html

ajax切换明星头像！相关推荐

ajax换头像,ajax切换明星头像！
html部分: Document .showBox{ width: 200px; height: 200px; margin: 100px auto; border: 1px solid gray; ...
ajax链接php,关于php：在ajax切换后，单击链接没有任何作用？
我想在这里找出一个奇怪的情况.我正在尝试设计邮箱系统,并让ajax-y成为某些选择.这是场景: 我们有一个页面,其中包含2个标签,收件箱和撰写.收件箱本质上是形式为mailbox.php?msg = ...
《三国志11》版明星头像
做的很经典!<三国志11>版明星恶搞头像徐若瑄朱茵范冰冰关之琳郭富城莫文尉吴彦祖周慧敏蔡卓妍陈冠希陈慧琳刘德华孙燕姿刘亦菲谢霆锋余文乐张柏芝张学友钟欣 ...
java ajax上传头像代码_ajax头像上传
$(function() {var canvas = document.getElementById("container"), context= canvas.getContex ...
java ajax 更改头像_为什么js通过ajax前端修改头像不能立刻生效?
项目中有一个上传头像的功能,每次上传成功后,,数据库里的路径已经更新到了,但是刷新后就变成之前的头像,必需重新登录系统,才能显示修改后的头像.现在要改成,修改后就立刻生效. var photoImg; ...
ajax 切换列表,javascript实现列表切换效果
IE兼容性没处理,确切的说不太会,还望指点一二思路: 1.js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i]. ...
python 读取图片成为一维数组_OpenCV与Python之图像的读入与显示以及利用Numpy的图像转换...
1:读入图像,显示图像与保存图像代码: import cv2 img=cv2.imread('lena.jpg',cv2.IMREAD_COLOR) cv2.namedWindow('lena',c ...
ajax使用频率,11-Ajax详解
Ajax的基本概念及使用同步&异步同步:必须等待前面的任务完成,才能继续后面的任务: 异步:不受当前主要任务的影响. 举个例子: 同步:我们在银行排队时,只有等到你了,才能够去处理业务: ...
6.28 头像预览：form方法和ajax方法
一用form实现头像预览 <!DOCTYPE html> <html lang="zh"> <head><meta charset=&qu ...

ajax切换明星头像！

ajax切换明星头像！相关推荐

最新文章

热门文章