`
tanlingcau
  • 浏览: 138033 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iframe局部刷新

阅读更多
显示页query.jsp


<%@ page language="java"  pageEncoding="gbk"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>   
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>   
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>   
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  //查询
        function getInfoByKey(){
         //查询索引
         var items = document.getElementById("searchItem");
    var act = items.options[items.selectedIndex].text;
    if(act=="产品名称"){
     act = "produceName";
    }else if(act=="证书编号"){
     act = "producingCertificateNumber";
    }else if(act=="生产商"){
     act = "manufactureName";
    }else if(act=="检查机构"){
     act="certificationInstitution";
    }
    //查询关键字
    var keywords = document.getElementById("key").value;
    //是否精确查询
    var itemsQuery = document.getElementById("queryMode");
    var queryMode = itemsQuery.options[itemsQuery.selectedIndex].text;
    if(queryMode == "模糊"){
     queryMode = "like";
    }else if(queryMode == "精确"){
     queryMode = "is";
    }
    //每页显示的条数
    var itemsCount = document.getElementById("perPage");
   var perPage = itemsCount.options[itemsCount.selectedIndex].text;
    //iframe
    var ifrm = document.getElementById('detailIframe');
    //全部查询条件
    if(keywords == null || keywords == ""){
       ifrm.src = "server.jsp?perPage="+perPage;
    }else{
     ifrm.src = "server.jsp?act="+act+"&keywords="+keywords+"&queryMode="+queryMode+"&perPage="+perPage;
    }
  }
  </script>
    <base href="<%=basePath%>">
    
    <title>My JSP starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
  </head>
  
  <body><br><br><hr><br><br>
  <div align="center" id="mainDiv">
    <table border="1" width="800" id="mainTable">
     <tr>
      <td colspan="2">无公害农产品查询
       <div align="right">
       <input type="button" value="返回主页">
    <input type="button" value="返回上一界面">
    <input type="button" value="历史查询记录">
    </div>
      </td>
     </tr>
     <tr>
      <td width="200">
       <table>
        <tr><td align="center">检索导航</td></tr>
        <tr></tr><tr></tr><tr></tr>
        <tr>
         <td align="center">请选择检索范围:
          <select>
           <option>种植业</option>
          </select>
         </td>
        </tr>
        <tr><td align="left"><input type="checkbox">粮油类</td></tr>
        <tr><td align="left"><input type="checkbox">蔬菜类</td></tr>
        <tr><td align="left"><input type="checkbox">设施蔬菜类</td></tr>
        <tr><td align="left"><input type="checkbox">果品类</td></tr>
        <tr><td align="left"><input type="checkbox">茶叶类</td></tr>
        <tr><td align="left"><input type="checkbox">其它作物类</td></tr>
        <tr><td align="left"></td></tr>
        <tr><td align="center"><input type="button" value="分类检索"></td></tr>
       </table>
      </td>
      <td rowspan="2" valign="top">
       <form name="search" method="post">
       <table width="600" id="searchTable">
        <tr><td>检索项</td><td>匹配</td><td colspan="4">检索词</td></tr>
        <tr>
         <td>
          <select id="searchItem">
           <option>产品名称</option><option>证书编号</option><option>生产商</option><option>检查机构</option>
          </select>
         </td>
         <td>
          <select id="queryMode">
           <option>模糊</option>
           <option>精确</option>
          </select>
         </td>
         <td colspan="3"><input id="key" type="text" size="60"></td>
         <td colspan="2" align="left"><input type="button" value="检索" onclick="getInfoByKey()"></td>
        </tr>
        <tr>
         <td>排序
          <select>
           <option>按照产品分类</option>
           <option>按照产品名称</option>
           <option>按照标准名称</option>
          </select>
            </td>
            <td>每页
             <select id="perPage">
              <option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
          </select>
         </td>
        </tr>
        <tr>
         <td colspan="7">
          <iframe id="detailIframe" width="0" height="0"></iframe>
          <div id="detailDiv"></div>
         </td>
        </tr>
       </table>
       </form>
      </td>
     </tr>
     <tr>
      <td>相似检索词</td>
     </tr>
    </table>
  </div>
  </body>
</html>




处理页:server.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@ page import="com.pickedpoint.SAFAS.mobilecatch.server.hibernate.website.DAO.TPrUserproducingcertificateOperate;"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>   
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>   
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>   
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

<%
 //查询索引
 String act=request.getParameter("act");
 System.out.println("act:"+act);
 //查询关键字
 String keywords=request.getParameter("keywords");
 System.out.println("keywords:"+keywords);
 //查询模式
 String queryMode=request.getParameter("queryMode");
 System.out.println("queryMode:"+queryMode);
 //每页显示条数
 String perPage=request.getParameter("perPage");
 System.out.println("perPage:"+perPage);

 //查询类
 TPrUserproducingcertificateOperate operate = new TPrUserproducingcertificateOperate();
 //查询结果
 List list = null;
 
 //查询
 if(keywords==null || keywords==""){//如果没有输入关键字,则为全部查询
  list = operate.Query();
 }else{//条件匹配查询
  if(queryMode.equals("like")){
   String query = act + " like '%" + keywords + "%'";
   list = operate.QueryUserproducing(query);
  }else if(queryMode.equals("is")){
   String query = act + " = '" + keywords + "'";
   list = operate.QueryUserproducing(query);
  }
 }
 
 //总共查出多少条
 int count = list.size();
 request.setAttribute("list", list);
 //总共多少页
 int countPageTmp = count % Integer.parseInt(perPage);
 int countPage = 1;
 if(countPageTmp != 0 || count == 0){
  countPage = count / Integer.parseInt(perPage) + 1;
 }else{
  countPage = count / Integer.parseInt(perPage);
 }
%>

<%
 //当前是第几页
 String currentPage = request.getParameter("currentPage");
 if(currentPage == null || currentPage == "") currentPage = "1";

 //当前从第几条开始显示
 int showPage = (Integer.parseInt(currentPage)-1) * Integer.parseInt(perPage);
 String showCount = String.valueOf(showPage);

 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript">
  //判断翻页按钮的可用性
  function inint(){
   alert(document.getElementById("forBtn").disabled);
   document.getElementById("forBtn").disabled = true;
   alert(document.getElementById("forBtn").disabled);
   if(document.getElementById("countDiv").innerHTML < 2){
    document.getElementById("nextBtn").disabled = true; 
   }
  }
  
  //查询索引
     var items = window.parent.document.getElementById("searchItem");
  var act = items.options[items.selectedIndex].text;
  if(act=="产品名称"){
   act = "produceName";
  }else if(act=="证书编号"){
   act = "producingCertificateNumber";
  }else if(act=="生产商"){
   act = "manufactureName";
  }else if(act=="检查机构"){
   act="certificationInstitution";
  }
  //查询关键字
  var keywords = window.parent.document.getElementById("key").value;
  //是否精确查询
  var itemsQuery = window.parent.document.getElementById("queryMode");
  var queryMode = itemsQuery.options[itemsQuery.selectedIndex].text;
  if(queryMode == "模糊"){
   queryMode = "like";
  }else if(queryMode == "精确"){
   queryMode = "is";
  }
  //每页显示的条数
  var itemsCount = window.parent.document.getElementById("perPage");
  var perPage = itemsCount.options[itemsCount.selectedIndex].text;
   
  //向上翻页
  function pageUp(){
   //总页数
   var countPage = document.getElementById("countDiv").innerHTML;
   //翻页后的页数
   var currentPage = document.getElementById("currentDiv").innerHTML-1;
   document.search.action = "server.jsp?act="+act+"&keywords="+keywords+"&queryMode="+queryMode+"&perPage="+perPage+"&currentPage="+currentPage;
   document.search.submit();
  }
  
  //向下翻页
  function pageDown(){
   //总页数
   var countPage = document.getElementById("countDiv").innerHTML;
   //翻页后的页数
   var currentPage = document.getElementById("currentDiv").innerHTML+1;
   document.search.action = "server.jsp?act="+act+"&keywords="+keywords+"&queryMode="+queryMode+"&perPage="+perPage+"&currentPage="+currentPage;
   document.search.submit();
  }
 </script>
  </head>
  
  <body onload=""> 
   
   <div id="detailDiv">
   <table width="550" border="1">
  <tr><td>省名</td><td>市县名</td><td>乡镇名</td><td>证书编号</td><td>产品编号</td><td>生产单位</td><td>查看</td></tr>
  <logic:iterate offset="<%=showCount %>" length="<%=perPage%>" id="showList" name="list" type="com.pickedpoint.SAFAS.mobilecatch.server.hibernate.model.TPrUserproducingcertificate">
   <tr>
    <td><bean:write name="showList" property="producingProvince"/></td>
    <td><bean:write name="showList" property="producingCity"/></td>
    <td><bean:write name="showList" property="producingTown"/></td>
    <td><bean:write name="showList" property="producingCertificateNumber"/></td>
    <td><bean:write name="showList" property="userProducingCertificateId"/></td>
    <td><bean:write name="showList" property="manufactureName"/></td>
    <td> <a href="detail.jsp?id=<%=showList.getUserProducingCertificateId()%>">详细</a> </td>
   </tr>
  </logic:iterate>
 </table>
 <table width="550">
  <tr>
   <td colspan="7" align="right">
   <div style='float="right"'>
    <div style='float="left"'>页:</div>
    <div id="currentDiv" style='float="left"'><%=currentPage%></div>
    <div style='float="left"'>/</div>
    <div style='float="left"' id="countDiv"><%=countPage %></div>
    <div style='float="left"'> 共<%=count %>条</div>
    <div id="pageControl" style='float="left"'><input id="forBtn" type="button" value="上一页" onclick="pageUp()"><input id="nextBtn" type="button" value="下一页" onclick="pageDown()"></div>
   </div>
   </td>
  </tr>
 </table>
  </div>
  <script>
  <!--
    inint();
   window.parent.document.all['detailDiv'].innerHTML=document.all['detailDiv'].innerHTML;
  -->
  </script>
  </body>
</html>


注意script的位置

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    iframe局部刷新.txt

    ### iframe局部刷新技术详解 #### 一、概述 在网页开发中,为了提高用户体验和页面加载效率,有时候我们需要实现页面的局部刷新功能。局部刷新是指只更新页面的一部分内容,而不是整个页面重新加载。这种方式可以...

    基于AdminLTE(bootstrap)用iframe实现的局部刷新的案例

    本案例主要探讨如何基于AdminLTE(一个基于Bootstrap的开源后台主题)利用iframe和JavaScript实现局部刷新功能,以提升用户体验。 AdminLTE是一个免费的响应式后台模板,其设计灵感来源于Twitter的Bootstrap框架,...

    iframe之局部刷新

    iframe之局部刷新 - 行知 - JavaEye技术网站.mht

    基于AdminLTE(bootstrap)用JS实现的局部刷新的案例

    7. **iframe局部刷新**:虽然在当前案例中没有直接提到,但有时也可以使用iframe来实现局部刷新。将需要刷新的部分放在一个iframe内,然后改变iframe的src属性即可。 通过以上步骤,你可以实现在AdminLTE和...

    bootstarp+iframe 实现局部刷新 后台模板

    在后台模板中,`iframe`通常被用来承载各个功能模块,如数据管理、设置等,这样当用户在不同模块间切换时,只需要加载`iframe`内的内容,而不是整个页面,实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...

    基于bootstrap用iframe实现的局部刷新的案例

    在这个“基于bootstrap用iframe实现的局部刷新的案例”中,我们将探讨如何利用Bootstrap结合JavaScript(特别是与标签相关的操作)以及iframe元素来实现页面的局部刷新和tab页切换效果。 首先,Bootstrap的Tab组件...

    JavaScript中iframe实现局部刷新的几种方法汇总

    Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新,通过本文和大家一起学习iframe实现局部刷新的几种方法汇总,对iframe局部刷新相关知识感兴趣的朋友一起学习吧

    PHP网站使用JavaScript和Iframe简单实现部分刷新效果1

    总的来说,PHP结合JavaScript和Iframe可以有效地实现动态网站的局部刷新效果,提高用户体验。通过合理的页面布局,JavaScript的交互控制以及Iframe的动态内容加载,我们可以创建出响应用户操作、更新快速且界面流畅...

    iframe实现页面局部刷新操作

    `iframe`是一种HTML元素,它可以在一个网页中嵌入另一个网页,使得我们可以在独立的框架内加载和显示内容,从而实现局部刷新的效果。在本案例中,我们将讨论如何利用`iframe`来实现图片的上传和无刷新展示,以及涉及...

    页面四种局部刷新技术.txt

    从给定的文件标题、描述、标签以及部分内容来看,主要涉及了四种页面局部刷新的技术,包括iframe、JavaScript、Callback(回掉函数)以及Ajax。下面将对这四种技术进行详细解析: ### 1. iframe(内联框架) ...

    iframe框架的多种刷新方法总结

    适合用于iframe框架集的几种页面刷新方法,局部刷新,动态刷新, window.location.herf的刷新方式

    四种局部刷新技术

    这里我们将深入探讨四种常见的局部刷新技术:iframe、JavaScript、callback以及Ajax。 首先,**iframe(内联框架)**是最早的局部刷新手段之一。通过在HTML文档中嵌入一个或多个iframe元素,每个iframe可以加载不同...

    layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

    当我们点击某个菜单项时,会更新`id`为`demoAdmin`的`iframe`的`src`属性,使其指向相应的控制器和动作,从而实现局部刷新。这部分代码可以放在`@RenderSection("scripts", required: false)`中: ```javascript ...

    iframe标签实现网页部分刷新

    - 实现局部刷新,提高用户体验。 - 隔离脚本,避免互相干扰。 - 可用于加载外部内容,如广告或第三方API。 缺点: - SEO优化困难:搜索引擎可能无法正确抓取`iframe`内的内容。 - 性能问题:过多的`iframe`可能导致...

    基于jQuery捕获超链接事件进行局部刷新代码

    然而,在进行iframe局部刷新时,会面临一个问题,即如何在地址栏中更新URL而不引起整个页面的刷新。在原始代码中,通过以下代码段试图解决这个问题: ```javascript var href = window.location.href; window....

    springboot页面局部刷新后台管理系统

    在前端,不使用iframe意味着采用更现代的Web开发技术,如AJAX和Vue.js等,来实现在后台管理界面的局部刷新。这样可以提高用户体验,因为只更新必要的部分,而不是整个页面。前端插件的使用,如Element UI或Ant ...

Global site tag (gtag.js) - Google Analytics