• 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;
    
        } 
    
    }
    
    
    ?>
  • 相关阅读:
    转载cocos3.17cmake打包
    cocos-lua3.17 Lua tableView工具类
    cocso引擎整体流程
    letCode-1
    letCode-2
    图像语义分割的前世今生
    简要介绍弱监督学*
    win10下乌龟git安装和使用
    STM32F4+Wi-Fi+EDP 向 OneNet 上传数据
    GoogLeNet学习
  • 原文地址:https://www.cnblogs.com/hzijone/p/5842546.html
Copyright © 2020-2023  润新知