jquery实现页面局部刷新
2014-06-25 14:33
603 查看
后台管理中总是使用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>
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实现局部刷新页面数据绑定
- jQuery实现AJAX定时局部页面刷新
- jquery实现form表单提交后局部刷新页面的多种方法
- jquery刷新页面的实现代码（局部及全页面刷新）
- jQuery实现AJAX定时刷新局部页面实例
- jquery 实现页面局部刷新ajax做法
- jquery刷新页面的实现代码（局部及全页面刷新）
- jQuery实现AJAX定时刷新局部页面
- jquery刷新页面的实现代码（局部及全页面刷新）
- jQuery实现AJAX定时刷新局部页面实例
- 用Jquery.load载入页面实现局部刷新
- jquery实现页面局部刷新
- jquery 实现页面局部刷新ajax做法
- jquery实现form表单提交后局部刷新页面的多种方法
- jQuery实现AJAX定时局部页面刷新
- jQuery实现AJAX定时刷新局部页面实例
- jquery实现页面局部刷新
- 使用jquery的load()方法实现页面局部刷新
- jquery使用iframe实现HTML页面局部刷新代码
- jQuery实现AJAX定时局部页面刷新