真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧

最近在做一个异步刷新页面中的局部,这样做可以防出闪白和已选数据的丢失,话不多说,下面介绍怎么实现的

其中在要实现局部刷新的A.jsp页面中实现代码:

function freshTable(url, beginTime, endTime, selectType, node, page){
$.ajax({
type: "POST",
url: url,
data: {beginTime: beginTime,
endTime: endTime,
selectType: selectType,
node: node,
page: page},
dataType: "html",
cache: false,
async : true,
contentType:"application/x-www-form-urlencoded;charset=utf-8",
success: function(value){
$("#show").html(value);
},
error: function() {
}
});
}

data是要传给后台的参数,后台以获取这些参数如下所示例:

import javax.servlet.http.HttpServletRequest;//导入的包

//获取页面传递过来的ID
HttpServletRequest request=(HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
String beginTime = request.getParameter("beginTime");//开始时间
String endTime = request.getParameter("endTime");//结束时间

value是返回页面的源代码

$("#show").html(value);show是要刷新的div的id,如下:

<div id="show"></div>
<action name="ajaxAction" class="AjaxAction">
<result name="success">/B.jsp</result>
</action>

url可以是.jsp文件,不过我们用ssh框架一般都是传action进去,如果是.jsp文件,那么我们就是从.jsp里生成下面的value数据。从action进去的话,url也就是一个action,进入到action后,还是跟平常的一样取list等数据传出来,但传出来的数据不一定是返回A.jsp文件里面,返回哪个页面,这要看你strut.xml文件里面此action的返回是什么了。如果你返回的是A.jsp界面的话,上面的value数据其实就是A.jsp的源代码。下面我们新建一个B.jsp文件,来接收后台传回来的值且是<div id="show"></div>要替换的内容

先把struts.xml文件里面的action配返回的界面为B.jsp

这样,我们从后台返回的List数据就传给B.jsp页面了。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<table class="listTable" border="0" cellpadding="0" cellspacing="0">
<s:iterator id="list01" value="warningInfomationList" status="st" var="wil">
<s:if test="#st.index % 2 == 0">
<tr class="normalRow">
</s:if>
<s:else>
<tr class="alternateRow">
</s:else>
<td width="140px">${wil}</td>
<td width="190px">${meter.meter_Name}</td>
<td width="90px">${msgType.warningType_Name}</td>
<td>${content}</td>
</tr>
</s:iterator>
</table>

后台传表给数据给B.jsp页面生成源代码后,此时ajax中的value等于B.jsp页面的源代码。再经过$("#show").html(value);传给id号为show的div,就这样,局部刷新就完成了。

js异步刷新局部页面的更多相关文章

  1. Ajax异步刷新局部页面的小李子

    看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:

  2. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  3. js将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...

  4. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  5. 局部页面传值Model

    1:新建个局部页面,将这里页面的Model数据传递过去,在局部页面进行和一般页面一样的操作就行. 这里和HTML.Action不一样,对于HTML.action来说,它是新建了一个action来进行传 ...

  6. 常用的js跳转页面方法实现汇总

    1.window.location.href方式 <script language="javascript" type="text/javascript" ...

  7. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  8. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  9. atitit. js 跨界面 页面 web cs 传值方法总结

    atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法:   直接传跟跟间接传递... 1.直接传跟new form(param)    web使用url方 ...

随机推荐

  1. 超详细的Web前端开发规范文档

    规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合 ...

  2. 启动apache 提示Starting httpd: AH00558

    Starting httpd: AH00558: httpd: Could not reliably determine the server's fully qualified domain nam ...

  3. caffe源码阅读(1)_整体框架和简介(摘录)

    原文链接:https://www.zhihu.com/question/27982282 1.Caffe代码层次.回答里面有人说熟悉Blob,Layer,Net,Solver这样的几大类,我比较赞同. ...

  4. STM32F103X datasheet学习笔记---GPIOs and AFIOs

    1.前言 每个GPIO端口有如下几个寄存器进行操作: 两个32位配置寄存器:GPIOx_CRL, GPIOx_CRH 两个32位数据寄存器:GPIOx_IDR, GPIOx_ODR 一个32位set/ ...

  5. flask_restplus(1)- 未完成

    快速开始 本指南假设您对Flask有一定的了解,并且您已经安装了Flask和Flask- restplus.如果没有,则按照安装部分中的步骤操作. 初始化 与其他所有扩展一样,您可以使用应用程序对象初 ...

  6. ES系列十九、kibana基本查询、可视化、仪表盘用法

    一. 定义索引模式匹配 1.前缀模糊匹配,一个模式匹配多个索引 每一个数据集导入到Elasticsearch后会有一个索引匹配模式,在上段内容莎士比亚数据集有一个索引名称为shakespeare,账户 ...

  7. maven名词解释

    Maven名词解释 Project:任何你想build的事物,Maven都可以认为它们是工程.这些工程被定义为工程对象模型(POM,Poject Object Model).一个工程可以依赖其它的工程 ...

  8. git安装及基础用法

    1.安装GitGit-2.9.3-64-bit.exe 2.打开Git Bash,设置用户名,Email $ git config --global user.name "Your Name ...

  9. tomcat jetty

    背景 其实这个比较毫无意义.只是当时突然知道了jetty,所以记下来,对于开发人员来说选择哪个一般意义不大. 转载 从架构上来看 Tomcat 在处理少数非常繁忙的连接上更有优势,也就是说连接的生命周 ...

  10. linux windows 传输文件

    其中两种方式,当然,只是我自己试验的两个,其实还有别的方法,但是我也懒得实践了. 1  pscp c:\abc.sql root@192.168.1.1:/home/person/hww 2  Lrz ...