js异步刷新局部页面
真不想说博客园的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异步刷新局部页面的更多相关文章
- Ajax异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- js将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- 局部页面传值Model
1:新建个局部页面,将这里页面的Model数据传递过去,在局部页面进行和一般页面一样的操作就行. 这里和HTML.Action不一样,对于HTML.action来说,它是新建了一个action来进行传 ...
- 常用的js跳转页面方法实现汇总
1.window.location.href方式 <script language="javascript" type="text/javascript" ...
- js和jquery页面初始化加载函数的方法及先后顺序
运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...
- js关闭当前页面(窗口)的几种方式总结(转)
js关闭当前页面(窗口)的几种方式总结 1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...
- atitit. js 跨界面 页面 web cs 传值方法总结
atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法: 直接传跟跟间接传递... 1.直接传跟new form(param) web使用url方 ...
随机推荐
- saltstack系列~第三篇
一 简介:今天来聊聊sls文件的编写二 目的:通过编写特定的sls文件实现环境的初始化和固定软件的安装三 目录: /srv/salt/ 可以构造deploy文件夹四 基本构造:配置基本以yaml规范. ...
- [Fedora 20] 设置Terminal快捷键 + 设置桌面快捷方式 + Terminal透明解决方案
一.设置Terminal快捷键 刚安装Fedora的时候,习惯性的按Ctrl+Alt+T可是终端怎么都不出来,这才意识到Fedora和Ubuntu是不一样的,于是自己设置快捷键 1.进入All set ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- sublime3 python 缩进问题
注意,在sublime中可以选择使用空格还是tap进行缩进, 可以宰这里面进行选择: 如果选择了使用tap符进行缩进,再用空格进行缩进,就会报undinent(没有缩进的错误),也可以这样判断,如果有 ...
- springboot系列二、springboot项目搭建
一.官网快速构建 1.maven构建项目 1.访问http://start.spring.io/ 2.选择构建工具Maven Project.Spring Boot版本2.1.1以及一些工程基本信息, ...
- C# 将任意对象快速转换为Json
由于最近项目里面Model类特别多,而我需要编写所有数据交互的接口,传输的格式是json,以前都是通过循环List<T>中的对象向StringBuilder对象中Apped字符串生成jso ...
- Android:Camera
Android Camera开发 Android手机关于Camera的使用,一是拍照,二是摄像,由于Android提供了强大的组件功能,为此对于在Android手机系统上进行Camera的开发,我们可 ...
- 卓越的目标检测器Pelee
Densenet的改良—PeleeNET Pelee: A Real-Time Object Detection System on Mobile Devices 论文地址:https://arxiv ...
- SqlServer 2017 下载地址及密钥
下载地址: ed2k://|file|cn_sql_server_2017_developer_x64_dvd_11296175.iso|1769777152|E21AE7C3576C0BDF1BC0 ...
- linux ubuntu 指令
查找文件:ls -lrt /java 用于查找java文件信息 https://ipcmen.com/ls编辑/etc/profilewen文件,在文件末尾添加export JAVA_HOME=/us ...