html部分：
Document
.showBox{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
}
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’;
}
}
}
};
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实现文件上传,有需要的朋友可以参考下. 方式一:利用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 切换环节 以前一开始用 …
随机推荐
dojo tree edit的使用[前端]
var store = new mydata.JsonRestStore({ target: ”
Jenkins – 持续集成环境搭建
1. Jenkins 概述 Jenkins是一个开源的持续集成工具.持续集成主要功能是进行自动化的构建.自动化构建包括自动编译.发布和测试,从而尽快地发现集成错误,让团队能够更快的开发内聚的软件. 2 …
PHP面试题汇总
1.用PHP打印出前一天的时间格式是2014-01-13 12:10:21(2分) 2.echo(),print(),print_r()的区别(3分) 3.能够使HTML和PHP分离开使用的模板(1分 …
ios开发之UIView的frame、bounds跟center属性的区别(附图)
博文暂时想到什么写什么,不顺理成章,不顺章成篇. 先看几个概念 坐标点Poit:向右侧为X轴正方向的值x,原点下侧为Y轴正方向的值y 大小Size:由宽度width和高度height构成,表示一个矩形 …
Distinct Substrings
spoj694:http://www.spoj.com/problems/DISUBSTR/ 题意:给以一个串,求这个串的所有不同子串的个数. 题解:第一次接触后缀数组,这里可以转化成,求所有子串后缀 …
在Ubuntu 14.04安装 Let’s Encrypt并配置ssl
1.下载安装 Let’s Encrypt客户端 cd /usr/local/sbin sudo wget https://dl.eff.org/certbot-auto 2.添加执行权限 sudo c …
华为oj—合并数组
题目标题: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 详细描述: 接口说明 原型: voidCombineBySort(int* pArray1,intiArray1Num,int* pAr …
MongoDB基础教程系列–第九篇 MongoDB 分片
1.分片介绍 分片(sharding)是将数据拆分,将其分散存到不同机器上的过程.MongoDB 支持自动分片,可以使数据库架构对应用程序不可见.对于应用程序来说,好像始终在使用一个单机的 Mongo …
浅谈React数据流管理
引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 …
(PMP)第5章—–项目范围管理
产品范围:所具有的特征和功能 项目范围:必须完成的工作. 5.1 规划范围管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (质量管理计划, 项目生命周期描述, 开发方法) 3.事业环境因 …