需求分析:

实现对网页上的图片进行显示。由于读取图片名称相同,而图片内容已发生改变。采用网上所用的要求浏览器不缓存的操作不生效

<META http-equiv="Pragma" CONTENT="no-cache">
<META http-equiv="Cache-Control" CONTENT="no-cache, must-revalidate">
<META http-equiv="expires" CONTENT="0">
<meta charset="utf-8">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">

后面采用ajax的方式请求数据,直接从后端将图片内容读取并返回给前端,从而实现图片数据的最新显示

前端 ajax请求:

        $.ajax({
url: 'index.php',
type: 'POST',
dataType: 'json',
data: {mode: '<?=$Mode?>',id:'<?=$idVal;?>'},
})
.success(function(data){
// console.log(data);
$.each(data,function(name,value){
// console.log(name);
// console.log(value);
$("#sm_image"+name).attr("src","data:image/png;base64,"+value); }) })
.done(function(data) {
console.log("success");
// $("sm_image").attr("src","data:image/png;base64,"+data);
// echo
})
.fail(function(data) {
console.log(data);
console.log("error");
})
.always(function() {
console.log("complete");
});

后台php解析并返回:

<?php 

if($_POST) {

   switch ($_POST['mode']) {
case 1:
// print_r($_POST['id']);
$idArr = explode(",", $_POST['id']); $jsonStr = "{"; for ($i=0; $i <count($idArr) ; $i++) {
$img = base64_encode(file_get_contents("/web/image/image_id".$idArr[$i].".png"));
$jsonStr .= "\"".$idArr[$i]."\":\"$img\",";
} $jsonStr = substr($jsonStr,0,-1); $jsonStr .= "}";
echo $jsonStr;
break;
case 2:
$id = $_POST['id'];
$img = base64_encode(file_get_contents("/web/image/image_id".$id.".png"));
echo '{"'.$id.'":"'.$img.'"}'; //读取图片数据并作base64编码
break;
default:
break; } } ?>

ajax 请求多张图片数据的更多相关文章

  1. ajax请求获取的数据无法赋值给全局变量问题总结

    一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...

  2. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  3. ajax请求回数组数据,Vue页面数组没同步问题

    记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 <tr v-for="item in list">{{ * ...

  4. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  5. 二、Ajax请求MVC中数据查询表返回datatable

    一.Ajax请求MVC中数据查询表返回datatable 解决方式 返回list

  6. Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  7. SpringBoot入门07-Thymeleaf中显示ajax请求到的数据

    Thymeleaf中显示ajax请求所需依赖 <!--所需依赖--><dependency> <groupId>org.springframework.boot&l ...

  8. jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

  9. jquery ajax请求成功,数据返回成功,seccess不执行的问题

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

随机推荐

  1. NOIp模拟赛 旅游

    很神奇的一道题,金策大爷给的题解: 什么叫神犇什么叫蒟蒻? IOI冠军的一句基本相同让我思考了一下午. 看完了题解我就想都没想开始用遍历二分图搞,但是搞到了65分后就总是会WA掉7组. 然后仔细的看了 ...

  2. java编程思想-java注解

    注解(也被称为元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据. 一.定义注解 注解的定义看起来很像接口的定义.事实上,与其他任何Java接口一样, ...

  3. 最简单的jQuery插件

    <script src="./jquery-1.7.1.min.js"></script><script>;(function($,undefi ...

  4. 自然语言13_Stop words with NLTK

    https://www.pythonprogramming.net/stop-words-nltk-tutorial/?completed=/tokenizing-words-sentences-nl ...

  5. shell操作mysql之增删改查

    假设mysql用户名root 密码123456,新建测试数据表utable 脚本如下: #!/bin/bash#mysqlop.shmysql="/app/local/mysql/bin/m ...

  6. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

  7. javascript 小技巧

    1:Boolean()==!! console.log(Boolean(888));//true console.log(!!(888));//true console.log(Boolean(&qu ...

  8. 事务环境下的CombGuid

    一直使用osharp,osharp3使用的是combguid,代码如下 /// <summary> /// 返回Guid用于数据库操作,特定的时间代码可以提高检索效率 /// </s ...

  9. [Unity] 常用技巧收集

    Unity 屏幕旋转 void Update () { //处理横向两个方向旋转 if(Input.deviceOrientation == DeviceOrientation.LandscapeLe ...

  10. iOS-马上着手开发iOS应用应用程序-第二部分构建应用程序

    第二部分构建应用程序 1,应用程序开发过程 2,设计用户界面 3,定义交互 4,教程:串联图 1,应用程序开发过程 定义概念 设计用户界面 定义交互 实现行为整合数据 对象是应用程序的基石 类是对象的 ...