zoukankan      html  css  js  c++  java
  • 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;
    
        } 
    
    }
    
    
    ?>
  • 相关阅读:
    MS SqlServer学习笔记(索引)
    Angular动态注册组件(controller,service...)
    如何成功发布一个MSMQ的Windows服务
    主流Web服务器一览
    .NET 创建Windows服务,及服务的安装卸载
    SQL Server 查询时间段内数据
    委托和事件
    类中实现 Dispose And Finalize
    使用 ODBC .NET 提供程序和 Visual C# .NET 执行 SQL 参数化存储过程
    Windows Form 中快捷键设置
  • 原文地址:https://www.cnblogs.com/hzijone/p/5842546.html
Copyright © 2011-2022 走看看