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可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
随机推荐
- JAVA获取apk包的package和launchable-activity名称(一)
背景: 每次要获取apk包的package和launchable-activity名称都需要运行doc命令,感觉好浪费感情,因为经常记不住常常的路径,但又不想把aapt设置为环境变量 我这个工具分几步 ...
- requst方法简单用一下
使用getParametar() 获取表单提交过来的文本框的值 setAttribute(String name, Object o)存储此请求中的属性.在请求之间重置属性.此方法常常与 Reques ...
- POJ1915Knight Moves(单向BFS + 双向BFS)
题目链接 单向bfs就是水题 #include <iostream> #include <cstring> #include <cstdio> #include & ...
- spring--学习之IOC DI
2.1.1 IoC是什么 Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器 ...
- 创建 sequence
-- Create sequence create sequence XRMKSD_DET_SEQminvalue 1maxvalue 999999999999999999999999999start ...
- RestSharp使用
class Program { private readonly static string investRankingForAllUrl = "http://192.168.1.98:90 ...
- Java——表格
import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import javax.swing.JFrame; i ...
- ubuntu下Eclipse下添加GBK编码
把Windows下的工程导入到了Linux下Eclipse中,由于以前的工程代码,都是GBK编码的(Windows下的Eclipse 默认会去读取系统的编码,所以Widnwos下的Eclipse的编码 ...
- hdu 1873 看病要排队(优先级队列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1873 题目大意: 三个医生看病,病人排队看病,病人有优先级,优先级高的提前看病,同样的优先级按先后.I ...
- 解决问题--VS2012中一个Panel覆盖另一个Panel时拖动时容易造成两个控件成父子关系的避免
在*.Designer.cs中,假如想把panel1覆盖到panel2上,但是VS自动让panel1成为panel2的子控件了,在文件中会有this.panel2.Controls.Add(this. ...