js页面局部刷新问题

JavaScript020

js页面局部刷新问题,第1张

第一种方法,在你的代码基础上:

1、假设左边tree的html结构:

<ul id="tree">

<li><a href="javascript:void(0)" link="format.html">课表查询</a></li>

<li><a href="javascript:void(0)" link="1.html">信息修改</a></li>

</ul>

//注意以上a元素的link属性代表中间将要显示的页面的名称,根据需要自行修改

2、引入jquery库,在head之间添加如下代码:

$(function(){

var $tree_a = $("#tree").find("a")//获取tree中的a元素集合

var $main = $("#main")//获取中间部分元素

$tree_a.on("click", function(){

$main.empty()//初始化

var $frame =$("<iframe></iframe>")//定义框架对象

var $this = $(this)//当前被点击的tree的a

$frame.attr({//设置中间部分框架的属性

"src": $this.attr("link"),//框架引入的页面地址

"name": "main_frame",//框架名称

"width": $main.width() || "100%",//框架宽度

"height": $main.height() || "100%",//框架高度

"frameborder": "0",//框架边框

"scrolling": "auto"//框架滚动条设置

})

$frame.appendTo($main)//将框架插入到中间部分

})

})

第二种方法,改变你的代码结构:

1、修改html结构,将中间部分更改为iframe

<div id="main" style="width:82%background:yellowheight:500pxfloat:left">中间</div>

</div>

这段代码修改为

<ifame name="main" src="" id="main" frameborder="0" width="82%" height="500px" scrolling="auto"></iframe>

2、修改左侧tree的a元素

<a target="main" href="...">课表查询</a>

......

有问题请留言

题主可使用javascript里的ajax函数来实现html页面里的局部刷新功能,比如:我只刷新html页面中的某个div,把div中的内容换掉,或者数据更新,可以通过改变ajax函数的url访问路径来实现,可以访问某个目录下的文件,或者发送请求到服务器来刷新数据都可以,这是比较常用的方法,我举个例子:

我在html页面中用ajax来将ajax_info.txt这个本地文本文档中的内容重新刷新加载到id为myDiv的div控件中,而页面不用整个刷新。

ajax_info.txt内容为:

<p>AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

</p>

<p>

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

</p>

html页面代码为:

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

var xmlhttp

if (window.XMLHttpRequest)

{

//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest()

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true)

xmlhttp.send()

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

原本页面效果为:

点击按钮后页面效果为:

题主可以一试,如果觉得繁琐,可以看看jquery的ajax函数,是经过优化和简化的,更方便使用和上手。