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切换明星头像！的更多相关文章

  1. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  2. Django项目--web聊天室

    需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...

  3. 基于OpenCV性别识别

    叙述性说明 所谓的性别识别推断检测到的面部是男性还是女性.它是一个二值分类问题. 识别算法可以用于SVM,BP神经网络.LDA,PCA,PCA+LDA等等.OpenCV官网给出的文档是基于Fisher ...

  4. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  5. Python-Django-BBS

    一个项目从无到有 1 需求分析 -登录ajax,图形验证码 -注册forms和ajax,上传头像,头像预览 -博客首页 -个人站点 -点赞,点踩 -评论 -根评论 -子评论 -后台展示 -添加文章 - ...

  6. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  7. BBS总结

    表设计 from django.db import models from django.contrib.auth.models import AbstractUser # Create your m ...

  8. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

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

  9. 小记 vue 打包(build)需要注意的一些事

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

随机推荐

  1. oGitHub 注册

    GitHub 注册 要想使用 GitHub 第一步当然是注册 GitHub 账号: 1.首先打开 https://github.com/pricing 进行注册. 2.在打开的页面中点击「Sign u ...

  2. Rational Rose与UML教程

    在学UML的过程中,Rational Rose的角色无比重要.现在能找到的大多数是2003的,但下面连接是2007. http://blog.csdn.net/skl_TZ/article/detai ...

  3. Linux散列表(二)——宏

    散列表宏承接了双向链表宏的风范,好使好用!务必区分“结点”和“元素”!双链表宏博文中已经提及,这里不赘述! 1.获取元素(结构体)基址 #define hlist_entry(ptr, type, m ...

  4. Invocation of init method failed; nested exception is org.hibernate.HibernateException: could not instantiate RegionFactory [org.hibernate.cache.impl

    严重: Exception sending context initialized event to listener instance of class org.springframework.we ...

  5. mysql 加入�列，改动列，删除列。

    MySQL 加入�列,改动列,删除列 ALTER TABLE:加入�,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to ...

  6. ListView嵌套ListView优化

    在做业务时候,一个ListView显示多种数据类型,我们想到的方法是ListView在嵌套一个ListView,对于子ListView 占父ListView的一行,就攻克了问题,可是这种逻辑是不是有点 ...

  7. LTTng调试: 一个系统软件工程师的随手涂鸦

    http://nanxiao.me/install-lttng/ http://packages.efficios.com/ http://lttng.org/ http://lttng.org/do ...

  8. 再回首，Java温故知新（二）：Java基本数据类型

    Java作为一种强类型语言,意味着每一个变量都会有特定的类型,Java共有8种基本类型,其中有4种整型(byte.short.int.long).两种浮点型(float.double).1种字符型(c ...

  9. 第一篇：数据工程师眼中的智能电网(Smart Grid)

    前言 想必第一次接触到智能电网这个概念的人,尤其是互联网从业者,都会顾名思义的将之理解为"智能的电网". 然而智能电网中的"智能"是广义上的智能,它就是指更好的 ...

  10. JDK小技巧

    鉴于这段时间重新拾起Android,电脑上又是一大堆不同JDK版本的项目.来回切换JDK环境也够折磨人的. 不同版本JDK切换之后,java -version命令仍然显示的是之前的JDK版本,重启电脑 ...