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可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
随机推荐
- BZOJ1202 [HNOI2005]狡猾的商人&&BZOJ3436小K的农场
差分约束第三题 传送门: 很明显的差分约束,d[y]-d[x-1]>=v d[y]-d[x-1]<=v 根据这个建图然后跑bellman-ford就可以了. //BZOJ 1202 //b ...
- python 培训之 装饰器
1. 高阶函数 接收 函数作为参数,返回函数. 2. 函数闭包 3. 接收一个函数为参数,对其进行包装,然后返回一个包装函数(tip:包装函数中调用并返回参数函数. #! /usr/env/pytho ...
- JS-制作网页特效——选项卡效果(水平,点击)
//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式.后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div.把他们的样式去 ...
- wpf 保存控件中的内容为图片格式
黄色的是wpf控件的名称! //保存到特定路径 FileStream fs = new FileStream(@"C:\image.png", FileMod ...
- 如何排查APP服务端和客户端是否支持ATS
服务端排查 取得客户端直接连接的服务端域名及端口,例如mob.com.cn,端口443,即HTTPS默认端口.针对公网可访问的生产环境地址,建议使用的在线监测工具.https://wosign.ssl ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 入门:HTML:hello world!
<html> <head> </head> <body> <h1>hello world!</h1> </body> ...
- nginx的简单操作
1.今天在nginx下访问403,发现图片访问出现403,其他没有问题,看来下图片的文件夹没有读写的权限,修改下权限就OK了! 2.重启nginx 在env/nginx/sbin目录下输入:nginx ...
- 简述frame、bounds、center
frame是该视图在父视图坐标系统中的位置和大小.(参照父视图中的坐标系统) bounds是该视图在自身坐标系统中的位置和大小.(参照自身的坐标系统) center是该视图的中心点在父视图坐标系统中的 ...
- jQuery 遍历 - find() 方法
实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("span").css('color','red'); 详情:htt ...