Question

我试图在jsp页面中为我的轮播显示来自servlet的多个图像但是只显示第一个图像。我想知道如何显示Sql查询的所有结果.servlet代码是

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub      

    //response.setContentType("image/jpg");
    HttpSession myses = request.getSession(true);

    String imageid =  request.getParameter("id");
    //System.out.println("In servlet"+imageid);

    ServletOutputStream o; 

    try {
         Class.forName(driverName);
         con = DriverManager.getConnection(url,userName,password); 
         String sql = "select mid from carousel_two where cid= '"+imageid+"'";
         PreparedStatement stmt = con.prepareStatement(sql);
         ResultSet rs = stmt.executeQuery();
         myses.setAttribute("lis",rs);
         byte[] obj = new byte[1434295];
         byte[] sample = null;
         int srcPos = 0;
         //int i=0;
         //String encoded =new String ();
         o = response.getOutputStream();

         java.util.List<String> strings = new ArrayList<String>();

         //StringJoiner joiner = new StringJoiner(",");

         if(rs!=null ) {                 
             while(rs.next()) { 
                 String sql1 = "select img from carousel_two where mid= '"+rs.getInt("mid")+"'";
                 PreparedStatement stmt1 = con.prepareStatement(sql1);
                 ResultSet rs1 = stmt1.executeQuery();
                 if(rs1!=null) {
                     while(rs1.next()){ 
                     //int id = rs.getInt(1);
                     //System.out.println("id = "+id);
                     sample = rs1.getBytes("img");
                     int length = sample.length;
                     System.arraycopy(sample, 0, obj,srcPos, length);
                     srcPos += length;

                     //System.out.println("Length required = " + srcPos);

                     //if(rs!=null) {                
                         //System.out.println("mid"+rs.getInt("mid"));
                         //o.write(rs.getBytes("img"));
                         byte[] newArray = new byte[srcPos];
                         System.arraycopy(obj, 0, newArray, 0, srcPos);

                         response.setContentType("image/jpg");
                         // response.getOutputStream().write(newArray);

                         strings.add(DatatypeConverter.printBase64Binary(newArray));
                         //System.out.println(strings+"\n");

                         // encoded=DatatypeConverter.printBase64Binary(newArray);          
                     }
                 }           
          //}
          }
     }
     //int x=(encoded.split(";")).length;
     //  System.out.println("X"+x);

        //encoded=String.join(",", strings1);
        //encoded= String.join(",", strings); 
        String json = new Gson().toJson(strings);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        o.print(json);
        o.flush();                                   
    }catch (Exception e) {
     e.printStackTrace();
    }
}

并且javascript代码是

function trigger(idx, state) {
    document.getElementById('touchScroller').innerHTML=" ";
    $.ajax({
        type : "GET",
        url : "Sampleimage1",
        contentType :"application/json",
        data:{id:idx},
        success : function(data) {
            var da=data;
            //da=data.split(",");
            //alert(typeof data);
            //alert(da.length);
            $.each(da,function(index,item){
            alert( index);

            $('#touchScroller').append('<img src="data:image/jpg;base64,' +item +'" />');
        });                                           
    }                           
    });
}

我是新手，所以任何帮助都将受到赞赏。

Answer 1

<强> #Edit

使用以下

替换ResultSet的内部while循环

while(rs1.next()){ 
    byte[] dbImageArr = rs1.getBytes("img");
    strings.add(DatatypeConverter.printBase64Binary(dbImageArr));
}

这一切都是必需的，休息可以被忽略。这应该可以解决您的问题。

<强>建议：

单个HTTP调用可以返回single image resource（或二进制内容）。您需要使用名称或任何其他可识别的图像信息多次调用Servlet，Servlet将使用该信息返回正确的图像。

这是正确的做法。假设您需要一组图像。您知道组名是g1，其中有5个图像。您可以按照以下方式创建图像链接。

<img src="/ImageServlet?group=g1&seq=1>
<img src="/ImageServlet?group=g1&seq=2>
<img src="/ImageServlet?group=g1&seq=3>
<img src="/ImageServlet?group=g1&seq=4>
<img src="/ImageServlet?group=g1&seq=5>

这将对servlet进行5次调用，并根据组名和序列号返回图像。

如果您绝对想要一次性返回所有图像，则需要将它们转换为Base64字符串。然后，您可以返回包含图像Base64内容的JSON（或您认为合适的任何其他格式）。

{
    "img1": "data:image/png;base64,i.....",
    "img2": "data:image/png;base64,i.....",
    "img3": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i....."
}

注意：第一种方法是正确的方法，在性能和带宽利用方面具有优势。由于将有5个并行调用来获取图像，所以下载的任何图像都将显示，而无需等待其他人完成下载。

当然，可以选择将图像合并到一起，因为它是在加载精灵游戏时完成的，但你可能不想走得那么远。

显示来自servlet

1 个答案: