jquery实现页面局部刷新
程序员文章站
2022-06-17 11:48:22
...
后台管理中总是使用frameset进行分成部分进行管理，但是感觉很不好用，尤其是页面间调转还要判断window.parent，太令我费神了，于是学习使用XMLHttpRequest进行页面局部刷新。代码如下：
<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很简单，示例如下：
<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>
上一篇： 某强人手机里保存的五十条牛B短信
下一篇： 杀死指定进程名称的小VBS