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. java+ mysql 给所有的表添加假数据

    需求:别的项目, 代码扣过来了, 数据库也拿过来了, 但是数据库全是空表, 一共700 张表,需求是给表添加假数据,让它能运行起来. 一下是代码实现: 1.数据库连接: public static C ...

  2. Demon_动画控制（实现前后左右移动，喊叫）

    using UnityEngine; using System.Collections; public class PlayerAnimation : MonoBehaviour { float ve ...

  3. 提取HTML的正文类

    本文转载:http://blog.csdn.net/cjh200102/article/details/6824895 //2.提取html的正文 类 using System; using Syst ...

  4. leetcode第一刷_Interleaving String

    有关这样的字符串的题真是层出不穷啊,并且他们都有这样一个特点,就是递归的思路如此简单,但一定超时! 这个时候,dp就朝我们缓缓走来.递归超,dp搞!这道题的状态转移方程还是比較好写的,用ispart[ ...

  5. 杯具，万达电商又换CEO

    万达电商CEO再离职.而这距他入职还差一个月才满一年. 昨晚.万达电商CEO董策告诉新浪科技6月3日已正式从万达电商离职.将去往澳洲照应家人.而谈到离职原因和万达电商时,董策以开会为由收了电话. 从2 ...

  6. SEO为什么越来越难？

    不是很长的折腾seo该,无脑想如何很长的头发外链,一方面,没有花费的时间SEO在,另一方面SEO越来越难,的另一个方面,也SEO特征,不可控和不可预测性,致使我们花了非常多的情况下,SEO大部分时间都 ...

  7. Android（java）学习笔记195：学生信息管理系统案例（SQLite + ListView）

    1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...

  8. 【开源java游戏框架libgdx专题】-08-中文显示与绘制

    libgdx虽然是由美国人Mario Zechner(即BadlogicGames)写的开源引擎,由于Libgdx底层是用OpenGL实现的,所以Libgdx是可以支持中文的,在libgdx中的汉字都 ...

  9. oracle 关于动态执行语句 execute immediate 的用法

    当在开发的应用场景中 数据库处理复杂业务逻辑里用到 SQL 语句拼接    可以用  execute immediate   来执行语 举个例子 insert into tb_temp_public( ...

  10. CSS基本知识介绍

    CSS (Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 样式的几种控制方法: 1.行内样式         <div ...