ajax 请求多张图片数据
需求分析:
实现对网页上的图片进行显示。由于读取图片名称相同,而图片内容已发生改变。采用网上所用的要求浏览器不缓存的操作不生效
<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 请求多张图片数据的更多相关文章
- ajax请求获取的数据无法赋值给全局变量问题总结
一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- ajax请求回数组数据,Vue页面数组没同步问题
记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 <tr v-for="item in list">{{ * ...
- React 中的 AJAX 请求:获取数据的方法
React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...
- 二、Ajax请求MVC中数据查询表返回datatable
一.Ajax请求MVC中数据查询表返回datatable 解决方式 返回list
- Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
- SpringBoot入门07-Thymeleaf中显示ajax请求到的数据
Thymeleaf中显示ajax请求所需依赖 <!--所需依赖--><dependency> <groupId>org.springframework.boot&l ...
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- jquery ajax请求成功,数据返回成功,seccess不执行的问题
1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
随机推荐
- Linux 中,如何显示 (gcc)make时实际执行命令
问题: 调试编译问题,如何获取,GCC(或许make)时,实际编译器和链接器正在执行的命令? 解决方法: 方法一:通用方法 使用dry run,如下 $ make -n 这将显示make 命令正在试图 ...
- SVN Access to ‘/svn/Test/!svn/me’ forbidden,不能更新解决办法
今天上班,使用公司配置的电脑进行项目的更新.SVN报如下错误, SVN Access to '/svn/Test/!svn/me' forbidden,不能更新解决办法 很有意思: 开始以为自己的SV ...
- 细说Linux下软件包的安装与管理
一 源码安装方式 由于linux操作系统开放源代码,因而在其上安装的软件大部分也都是开源软件,例如apache.tomcat.php等软件.开源软件基本都提供源码下载,源码安装的方式:源码安 ...
- Centos 6.0将光盘作为yum源的设置方法
在使用Centos 的时候,用yum来安装软件包是再方便不过了,但是如果在无法连接互联网的情况下,yum就不好用了. 下面介绍一种方式,就是将Centos安装光盘作为yum源,然后使用yum来安装软件 ...
- OC面向对象特性:封装
概念性知识 1.c语言是面向过程编程:分析解决问题的步骤,实现函数,依次调用 2.oc语言是面向对象编程:分析问题的组成的对象,协调对象间的联系和通信,解决问题 3.#include和#impo ...
- linux redhat6.4安装oracle11g
系统要求 1. Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内存 交换空间 一般为内存的2倍,例如:1G的内存可以设置swap 分区为3G大小 硬盘 5G以上 2.修 ...
- Java——复选框:JCheckBox
import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ItemEvent; import java. ...
- C++中引用与指针的区别(详细介绍)
C++中引用与指针的区别(详细介绍) C++中的引用与指针的区别 指向不同类型的指针的区别在于指针类型可以知道编译器解释某个特定地址(指针指向的地址)中的内存内容及大小,而void*指针则只表示一 ...
- wordpress后台404页面
就在刚刚,boss需要看公司网站后台,网站是用wordpress搭的,发现全是404,蛋疼,于是google,下面是解决办法: location / { if (-f $request_filenam ...
- day4之函数
很快就第4天了,原来人是有惰性的,博客现在就不想写了,真是悲催,坚持,憋住. 函数 def func(name): print(name) func("huihuang") 函数定 ...