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&period;Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

小记 vue 打包&lpar;build&rpar;需要注意的一些事

记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 ...

随机推荐

dojo tree edit的使用&lbrack;前端&rsqb;

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属性的区别&lpar;附图&rpar;

博文暂时想到什么写什么,不顺理成章,不顺章成篇. 先看几个概念 坐标点Poit:向右侧为X轴正方向的值x,原点下侧为Y轴正方向的值y 大小Size:由宽度width和高度height构成,表示一个矩形 ...

Distinct Substrings

spoj694:http://www.spoj.com/problems/DISUBSTR/ 题意:给以一个串,求这个串的所有不同子串的个数. 题解:第一次接触后缀数组,这里可以转化成,求所有子串后缀 ...

在Ubuntu 14&period;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提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...

&lpar;PMP&rpar;第5章-----项目范围管理

产品范围:所具有的特征和功能 项目范围:必须完成的工作. 5.1 规划范围管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (质量管理计划, 项目生命周期描述, 开发方法) 3.事业环境因 ...