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 切换环节 以前一开始用 ...
随机推荐
- DFS序 参考许昊然《数据结构漫谈》
网上特别讲DFS序的东西好像很少 太简单了? 实用性不大? 看了论文中 7个经典问题, 觉得挺有用的 原文 "所谓DFS序, 就是DFS整棵树依次访问到的结点组成的序列" &quo ...
- poj2318 水题（二分+叉积）
题目链接:http://poj.org/problem?id=2318 #include<cstdio> #include<cstring> #include<cmath ...
- jQuery常用事件详解
window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下 ...
- 对于数组（字符串）slice方法的总结
数组(字符串)使用slice方法的目的就是截取目标数组(字符串),通俗的来讲就是截取想要的.网上有很多slice方法的实例加以说明,在此主要是从特殊到一般对此方法进行了总结. 先说总结的方法,再看下面 ...
- Android数据存储(1)少量数据保存之SharedPreferences接口实例
SharedPreferences数据保存主要是通过键值的方式存储在xml文件中 xml文件在data/此程序的包名/XX.xml 格式 <?xml version='1.0' encoding ...
- php session_set_save_handler 函数的用法(mysql)(转)
<?php /*============================文件说明======================================== @filename: s ...
- C#操作INI配置文件示例
源文件地址:http://pan.baidu.com/share/link?shareid=2536126078&uk=1761850335创建如图所示的控件: 源代码: using Syst ...
- Android带参数链接请求服务器
public void taste() { //设默认值 SharedPreferences.Editor editor = this.getSharedPreferences("setti ...
- Nginx反向代理，负载均衡配置
主配置文件:nginx.conf # For more information on configuration, see: # * Official English Documentation: h ...
- 分享一个导出数据到 Excel 的类库
起源: 之前在做一个项目时,客户提出了许多的导出数据的需求: 导出用户信息 导出业务实体信息 各种查询都要能导出 导出的数据要和界面上看到的一致 可以分页导出 ... 为了应对用户的这些需求,我决定先 ...