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; } } ?>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
2015-09-05 动态修改attr里的多个属性