jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理，但是感觉很不好用，尤其是页面间调转还要判断window.parent，太令我费神了，于是学习使用XMLHttpRequest进行页面局部刷新。代码如下：

Java代码

<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("email").onblur = function(){
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){
window.alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = function(){
if(http_request.readyState == 4 &&
http_request.status == 200) {
document.getElementById("emailTip").innerHTML
=http_request.responseText;
}
};
http_request.open("GET", "email.jsp?email="+this.value, true);
http_request.send(null);
}
}
</script>
</head>
<body>
<input type="button" value="修改" onclick="getOtherMessage();" />
<input type="text" id="email" />
<span id="emailTip"></span>
<div id="view">
456
</div>
</body>
</html>

后经高手提醒，可以使用ajax技术来写，使用jquery很简单，示例如下：

Java代码

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function getOtherMessage(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/getOtherMessage.do",
success:function(msg){
$("#view").html(msg);
},
error:function(){
alert("wrong");
}
});
}
</script>
</head>
<body>
<input type="button" value="修改" onclick="getOtherMessage();" />
<div id="view">
456
</div>
</body>
</html>

jquery实现页面局部刷新

时间： 2024-10-03 01:01:58

jquery实现页面局部刷新的相关文章

jquery 实现页面局部刷新ajax做法

这个方法就多了去了,常见的有以下几种:下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多开窗口) $.get方法,$.post方法,$.getJson方法,$.ajax方法如下前两种使用方法基本上一样复制代码代码如下:

关于页面局部刷新例程

RS技术的一个具体例子在前面的帖子中,我介绍了RS的基本工作原理,显然如果将RS技术运用在一个网站的设计中将会有很多非凡的作用(尤其是它的那个最大的优点,可以在不刷新页面的情况下调用服务端的代码).正是因为这个特点,你就可以象在编写一个传统的C/S模式的程序一样,对数据库的数据进行处理了(我想大家一定很想知道具体应该如何来实现了,下面将给出一个具体的例子,调试这个破程序几乎快把我给累死,呵呵.) 从前面的描述可以看到,要使用RS技术就需要客户端和服务端满足下面两个条件: 1.客户端只需要

JQuery 实现页面无刷新

对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作.(http://itred.cnblogs.com itRed: [email protected]) 在用JQuery实现页面无刷新的效果之前,我们需要掌握和了解一些基础知识,以方便我们在进行代码编写时更加的得心应手. 一．异步技术浏览器预设是使用同步的方式发出请求并等待回应,为了处理浏

使用ajax与iframe嵌套实现页面局部刷新

使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.?1. [代码]javascript代码 function cj_start(depname,groupid){ var urls = "<%=path%>/userGather.action"; var status = ""; var html_1 = "<iframe frameborder=\"0\&q

Jquery Ajax 页面局部更新

Ajax 是一个异步过程,页面中的一部分代码发出一个网络请求,在里面设置一个回调函数,如果网络请求得到返回,那么执行回调函数.在回调函数中的上下文和时间触发的上下文会有所不同,在jquery中的应用需求大多数时候是这样的.比如我点击了一个按钮,这个按钮是一个 tr 中的 td 中的内容,我可以通过这个点击时间确定当前行的任何属性,或者确定当前也面中的任何一个属性,只要这个页面的布局是又某种可控的过滤的话.需要实用到this关键字.还有就是 find() 方法.比如this.parent().fi

HTML页面局部刷新

/.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服务器处理后返回结果,再由Ajax接收数据: 3.通过DOM方法或jQuery方法将数据载入页面,事件响应刷新完成. $('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: "POST", url:

Webform——页面局部刷新

有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控件为:AJAX扩展里面的ScriptManager和UpdatePanel. ScriptManager就是封装好的JS代码,可以直接拿来用. UpdatePanel,要局部刷新的部分放在这里面去. 在这张图片里,省市区三个下拉列表就被放在了UpdatePanel里面,从而实现了局部刷新

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h

AjaxAnyWhere 实现页面局部刷新

这个比较jquery.单纯ajax异步简单多了,不多说了直接上代码. 需要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa.js ,免费下载地址http://download.csdn.net/detail/xuke6677/8064977 目录结构如下: 1.ListBean.java 实体类 <strong><span style="font-family:System;font-size