`
465886163
  • 浏览: 13793 次
  • 性别: Icon_minigender_1
  • 来自: 龙南
社区版块
存档分类

ajax图片显示问题

AjaxCSSJavaScriptIDEAIBM 
阅读更多

用ajax从后台获取到数据后怎么在页面显示，

 

现在数据已经获取到了，问题是要怎样显示

 

第一次查询到的数据是用servlet查询，然后用list迭代出来的

点击下一页的时候要怎样替换原来的图片呢？

各位大虾给点建议

 

再问下，ajax获取到的数据可以放入到我第一次查询用的list里面么？

 

页面代码如下，谢谢了

 

<%@ page language="java"
 import="java.util.*,com.ibm.vo.PhotoVO,com.ibm.common.Page"
 pageEncoding="GB18030"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB18030"></meta>
  <title>相片详细</title>
  <style type="text/css">
<!--
.STYLE15 {
 font-size: 12px;
 color: #999999;
}

.STYLE16 {
 color: #FF0000
}

#Layer1 {
 position: absolute;
 left: 905px;
 top: 303px;
 width: 30px;
 height: 30px;
 z-index: 1;
}

body {
 background-repeat: no-repeat;
}

.STYLE21 {
 font-size: 12px
}

a:link {
 font-size: 12px;
 text-decoration: none;
}

a:hover {
 font-size: 14px;
 text-decoration: none;
}

a:active {
 font-size: 14px;
 text-decoration: none;
}

.STYLE24 {
 font-size: 12px;
 color: #0066FF;
}

.STYLE26 {
 font-size: 14
}
.table {
table-layout: fixed;
word-wrap:break-word;
}
.div {
word-wrap:break-word;
}
-->
</style>

 <%
  Integer currow = (Integer) session.getAttribute("currow");
  Integer maxRow = (Integer) session.getAttribute("maxrow");
  Page pageCtrl = (Page) session.getAttribute("page");
  List<PhotoVO> list = (List<PhotoVO>) session.getAttribute("list");
  PhotoVO photo = (PhotoVO) session.getAttribute("photo");
 %>

  <script type="text/javascript"><!--
 function getNext() {
     　　var url = "../DetailListPhoto?currow=<%=(currow - 8) > 0 ? (currow - 8) : 0%>";
     　　if (window.XMLHttpRequest) {
             　　req = new XMLHttpRequest();
     　　}else if (window.ActiveXObject) {
             　　req = new ActiveXObject("Microsoft.XMLHTTP");
     　　}
     　　if(req){
             　　req.open("GET",url, true);
             　　req.onreadystatechange = complete;
             　　req.send(null);
     　　}
 }
 var name=[];
 var id=[];
 var url=[];
 function complete(){
     　　if (req.readyState == 4) {
             　　if (req.status == 200) {
            //alert(req.responseText);
            //$("#photolist").html(req.responseText);
   var city = req.responseXML.getElementsByTagName("photo");
   //alert(city);
                     　　var str=new Array();
           var result="";
                     　　for(var i=0;i<city.length;i++){
                             　　//str[i]=city[i].firstChild.data;
              // alert(str[i]);
             // alert(city[i].getElementsByTagName("name")[0].firstChild.nodeValue);
         id[i]= city[i].getElementsByTagName("pid")[0].firstChild.nodeValue;
               name[i]= city[i].getElementsByTagName("name")[0].firstChild.nodeValue;
         url[i]= city[i].getElementsByTagName("url")[0].firstChild.nodeValue;
        // result='<a href="../DetailPhoto?id='+id[i]+'"><img src="'+url[i]+'" alt="'+name[i]+'" width="95" height="93" border="0"></a>';
       //  document.getElementById("listphoto").innerHTML=result;
                     　　}
     for (var i=0;i<id.length;i++)
     {
       result +='<a href="../DetailPhoto?id='+id[i]+'" title="'+name[i]+'"><img src="'+url[i]+'" width="95" height="93" border="0"></a>';
     }     
         document.getElementById("listphoto").innerHTML=result;
      //elmt.innerHTML=result;  
             　　}
     　　}
 }
 function buildSelect(str,sel) {
     　　sel.options.length=0;
     　　for(var i=0;i<str.length;i++) {
             　　sel.options[sel.options.length]=new Option(str[i],str[i])
     　　}
 }
 --></script>


  <script language="JavaScript">

   <!--
   function Jumping(){
     document.PageForm.submit();
     return ;
   }
   
   function gotoPage(pagenum){
     document.PageForm.jumpPage.value = pagenum;
     document.PageForm.submit();
     return ;
   }
   
   -->
  </script>
 <link rel="stylesheet" href="../css/new.css" type="text/css"></link></head>
 <body>
  <table width="980" border="0" align="center" cellpadding="0"
   cellspacing="0" style="background-repeat: no-repeat">
   <tr>
    <td height="146" colspan="7" background="../image/images/header.jpg">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <img src="../image/logo.png" width="177" height="146" />
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <img src="../image/blogo.gif" width="374" height="62" vspace="40"
      align="bottom" />
    </td>
   </tr>
   <tr>
    <td height="45" colspan="3" align="left" valign="middle"
     background="../image/bander.gif">
     &nbsp;
    </td>
   </tr>
   <tr>
    <td height="5" colspan="3">
     &nbsp;
    </td>
   </tr>
   <tr>
    <td height="25" colspan="3">
     <table width="980" border="0" cellspacing="0" cellpadding="0">
      <tr>
       <td height="20">
        <span class="STYLE15">&nbsp;<a
         href="javascript:history.go(-1);">返回</a>&nbsp; |&nbsp; <a
         href="../ListAllPhoto?Identity=user">相片浏览区</a> > 相片详情 </span>
       </td>
       <td align="right">
        <font face="微软雅黑" style="font-size: 12px; color: #000000"><a
         href="/webManager/Idea">返回首页</a> </font>
       </td>
      </tr>
      <tr>
       <td>
        <hr></hr>
       </td>
      </tr>
     </table>
    </td>
   </tr>
   <tr>
    <td height="20" colspan="3">
     <table width="947" align="center">
      <tr>
       <td width="75">
        <a
         href="../DetailListPhoto?currow=<%=(currow + 8) > maxRow ? (currow - 8) : maxRow%>">上页</a>
       </td>
       <%
        for (int i = 0; i < list.size(); i++) {
       %>
       <td width="100" id="listphoto">
        <a href="../DetailPhoto?id=<%=list.get(i).getId()%>" title="<%=list.get(i).getName()%>"><img
          src="<%=list.get(i).getUrl()%>"
          width="95" height="93" border="0"></img>
        </a>
       </td>

       <%
        }
        if (list.size() < 8) {
       %>
       <td width="100">
        <a href="../DetailPhoto" title="返回第一张"><img src="../images/photo_back.png"
          width="95" height="93"  border="0"></img> </a>
       </td>
       <%
        }
       %>

       <td>  </td>
       <td width="75">
        <a href="#" onclick="getNext();"><img src="../images/2.jpg" border="0" /></a>
       </td>
      </tr>
 
     </table>
    </td>
   </tr>
   <tr>
    <td align="center">
     <table width="809">
      <tr>
       <td colspan="3">
        <p>
         &nbsp;
        </p>
        <p align="center">
         <strong><font color="#2e2e2e"><%=photo.getName()%></font>
         </strong>
        </p>
       </td>
      </tr>
<!--
<tr><td> <div class="menu"><ul><li id="listphoto" > </li> </ul></div>   </td></tr>
 -->
      <tr>
       <td colspan="3" align="center">
        <img src="<%=photo.getUrl()%>" />
       </td>
      </tr>
      <tr>
       <td align="center" colspan="3">
        <font size="2" face="宋体" color="#c0c0c0">上传于：<%=photo.getCreatetime()%></font>
       </td>
      </tr>
      <tr><td><table class="table">
      <tr>
       <td height="74">
       </td>
       <td align="center" width="425">
        <strong><font color="#000000">相片描述：</font> </strong><font
         color="#8f8f8f"><%=photo.getInfo()%></font>
       </td>
       <td height="74">
       </td>
      </tr>
      </table></td></tr>
     </table>
    </td>
   </tr>
   <tr>
    <td height="64" colspan="10" align="left" valign="middle"
     bgcolor="#CCCCCC">
     <span class="STYLE21">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      IDEA @ 2010. Powered by&nbsp;<a
      href="/webManager/aboutIdea/aboutIdea.jsp">Idea!</a> </span>
    </td>
   </tr>

   <tr>
    <td height="13" colspan="10">
     &nbsp;
    </td>
   </tr>
  </table>
 </body>
</html>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax图片显示插件

    **Ajax 图片显示插件详解** Ajax 图片显示插件是一种在网页中实现无缝加载和展示图片的技术，它利用 AJAX（Asynchronous JavaScript and XML）技术，使得用户无需刷新页面即可查看图片，提供了一种优雅的用户体验。...

    AJAX显示图片特效代码

    5. **CSS样式**：为了实现更丰富的图片显示效果，可能需要结合CSS来控制图片的布局、大小、动画等。例如，可以使用CSS3的`transition`和`transform`属性实现平滑的图片切换效果。 6. **事件监听**：在用户交互如...

    ajax图片框显示图片的加载进度Demo

    "Ajax图片框显示图片的加载进度Demo" 提供了一种解决方案，它利用JavaScript（JS）、Ajax以及jQuery技术来实现图片在加载过程中的进度显示，从而提升用户交互体验。这个Demo的目的是让用户在等待图片加载时能够看到...

    支持图片上传及实时显示，可设置显示图片的大小。由php、Ajax、javascript开发

    **实时显示** 是通过Ajax的异步特性实现的，服务器处理图片上传后，返回一个确认消息，JavaScript接收到消息后更新页面，显示上传成功的提示或新图片。 **图片大小设置** 可能涉及到两部分：前端预览和后端处理。...

    SpringMVC+Ajax异步上传图片并显示(源码)

    前端接收到响应后，可以动态更新HTML，将新上传的图片显示在页面上。 在实际项目中，为了提高用户体验，可能还需要添加进度条显示、图片预览、大小限制检查等功能。此外，安全方面也需要考虑，比如防止恶意文件上传...

    ajax无刷新上传图片

    9. **错误处理**：当上传过程中出现错误时，如网络问题、文件过大等，Ajax的error回调会被触发，这时可以展示错误信息，并提供重试机制。 10. **进度反馈**：如果ajaxfileupload插件支持，还可以通过progress回调...

    php+ajax 图片管理

    【PHP+AJAX图片管理系统详解】 在Web开发领域，PHP和AJAX是两种常见的技术，它们结合使用可以创建出高效、交互性强的图片管理系统。PHP作为服务器端脚本语言，负责处理数据和业务逻辑；而AJAX（Asynchronous ...

    loading(各种AJAX加载图片)

    综上所述，"loading(各种AJAX加载图片)"涉及到的内容包括AJAX的基础与应用，图片的异步加载策略，加载效果的设计与实现，跨域问题的解决，以及性能优化等多个方面。通过这些技术，我们可以构建出更加流畅、高效的...

    ajax图片上传插件

    Ajax图片上传插件是一种在网页上实现异步图片上传功能的技术解决方案。它通过Ajax（Asynchronous JavaScript and XML）技术，允许用户在不刷新整个页面的情况下，将图片数据发送到服务器进行处理，极大地提升了用户...

    ajax提交form表单和上传图片

    本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式，用户无需等待页面刷新，即可完成操作，提升了交互性。 首先，`jquery.js` 是jQuery库的核心文件...

    通过Ajax上传图片

    在Web开发中，图片上传是常见的功能之一，而使用Ajax技术可以使这个过程更加用户友好，无需刷新整个页面即可完成操作。本文将详细讲解如何利用jQuery的Ajax方法来实现在前端向后端服务器上传图片。 首先，我们需要...

    ajax jquery 常用图片

    利用CSS3的媒体查询和jQuery的`$(window).resize()`事件，可以根据不同的设备屏幕尺寸调整图片的大小和布局，确保在任何设备上都能良好显示。 最后，为了保证图片的质量和大小，可以使用图片压缩工具，如TinyPNG或...

    以AJAX方式加载图片=异步加载图片,先显示个图片的占位图片 此技术常见于漫画网站.zip

    在网页开发中，异步加载图片（以AJAX方式加载图片）是一种常见的优化技术，尤其在处理大量图片的场景下，比如漫画网站。通过这种方式，可以显著提高页面加载速度，提升用户体验。AJAX（Asynchronous JavaScript and ...

    Jquery Ajax 图片上传

    在本文中，我们将深入探讨如何使用jQuery AJAX实现图片上传功能，同时结合无刷新预览和加载指示器（Loading）效果。 一、jQuery AJAX基础 在使用jQuery AJAX进行图片上传之前，我们需要了解其基本概念。AJAX代表...

    AJAX上传图片，并显示上传进度条

    在现代Web应用中，用户交互体验的提升是一个关键因素，其中...实现AJAX图片上传并显示进度条，需要结合前端的JavaScript和后端的服务器处理。通过合理运用这些技术和工具，我们可以构建出高效且用户体验优秀的Web应用。

    ajax实现图片上传

    ### AJAX 实现图片上传知识点详解 #### 一、概述 在现代Web开发中，通过Ajax技术实现图片上传已经成为一种常见的需求。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新...

    jsp Ajax图片上传

    在IT领域，尤其是在Web开发中，`jsp Ajax图片上传`是一项常见的需求，它涉及到前端与后端的交互，实现用户无需刷新页面即可完成图片的上传。以下是对这一技术的详细解释： **Ajax（Asynchronous JavaScript and XML...

    JQuery+ajax实现批量上传图片

    在本文中，我们将深入探讨如何使用JQuery和Ajax技术实现批量上传图片的功能。批量上传图片是一种常见的用户交互需求，尤其在社交媒体、博客平台或者在线商店等网站中非常常见。通过结合JQuery的便利性和Ajax的异步...

    AJAX PHP图片上载

    在AJAX图片上传中，IFRAME通常用于创建一个隐藏的表单，用户在选择图片后，表单会提交到IFRAME中，这样可以在后台完成文件上传，而不会影响到主页面的显示。 在PHP方面，作为服务器端的语言，它负责接收上传的图片...

    ajax多图片上传预览

    "Ajax多图片上传预览"技术就是为了解决这个问题，它允许用户在真正提交图片到服务器之前进行预览，无需等待整个文件上传完成。这种功能极大地提升了用户体验，因为它减少了用户的等待时间，并且在上传过程中提供了...

Magicbox
Global site tag (gtag.js) - Google Analytics