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 获取对应的 value
echo $starArr[$starKey]; ?>
ajax切换明星头像!的更多相关文章
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- Django项目--web聊天室
需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...
- 基于OpenCV性别识别
叙述性说明 所谓的性别识别推断检测到的面部是男性还是女性.它是一个二值分类问题. 识别算法可以用于SVM,BP神经网络.LDA,PCA,PCA+LDA等等.OpenCV官网给出的文档是基于Fisher ...
- (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- Python-Django-BBS
一个项目从无到有 1 需求分析 -登录ajax,图形验证码 -注册forms和ajax,上传头像,头像预览 -博客首页 -个人站点 -点赞,点踩 -评论 -根评论 -子评论 -后台展示 -添加文章 - ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- BBS总结
表设计 from django.db import models from django.contrib.auth.models import AbstractUser # Create your m ...
- 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框
一.为什么要学Jquery Mobile JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...
- 小记 vue 打包(build)需要注意的一些事
记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 ...
随机推荐
- 英蓓特Mars board的android4.0.3源码编译过程
英蓓特Mars board的android4.0.3源码编译过程 作者:StephenZhu(大桥++) 2013年8月22日 若要转载,请注明出处 一.编译环境搭建及要点: 1. 虚拟机软件virt ...
- 【转】AngularJs $location获取url参数
// 带#号的url,看?号的url,见下面 url = http://qiaole.sinaapp.com?#name=cccccc $location.absUrl(); // http://qi ...
- Xamarin开发教程如何使用Xamarin开发Android应用
Xamarin开发教程如何使用Xamarin开发Android应用 如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和 ...
- 谈一下spring 的理解
spring,大家基本都在使用,两个核心: 声明式事务AOP : 控制反转依赖注入IOC: 以前对控制反转和依赖注入很模糊,现在大概理解了意思,控制反转,有spring容易来控制bean 的创建,我们 ...
- java 吞吐量
jvm中 ,执行用户的代码占 的时间/总时间 ,假如前者是99 分钟,后者一分钟,则吞吐量为99% ,吞吐量越大.系统越好,如何设计系统,导致系统吞吐量高,因为我们知道,垃圾回收,7种垃圾收集器,也不 ...
- 解决PyGObject在pydev下报错的问题
使用PyGObject在eclispe+pydev下写代码,由于库是动态链接的,pydev无法识别,所以检查语法的时候会报错,但是并不影响代码运行. 不过对于我这样由轻微强迫症的患者来说,看见代码报错 ...
- IOS 获取通讯录中信息
获取通讯录中信息 一. 我们设置一个ABAddressBookRef类型的属性addressBook. 二. 要获得通讯录中的信息,我们需要获取访问通讯录的权限. 在运行下面的获取权限的方法的时候,系 ...
- Ubuntu install mysql
sudo apt-get install mysql-server sudo apt-get install libmysqlclient-dev
- Creating a Background Service ——IntentService
The IntentService class provides a straightforward structure for running an operation on a single ba ...
- mysql 大表 Sharding [转]
参看以下两篇文章 http://www.dedecms.com/knowledge/data-base/mysql/2012/0820/9172.html http://dbanotes.net/da ...