首页 > 代码库 > ajax 请求多张图片数据
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 请求多张图片数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。