网页局部刷新

howema 2009-11-27 09:31:25

网页中有两个table，如何只刷新其中一个，而另外一个不刷新？
高手赐教！有例子最好。

...全文

718 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

howema 2009-12-01

打赏
举报

[Quote=引用 12 楼 likejun45 的回复:]
这个后台代码放Handler.ashx里面...
不过是.net的后台代码，如果你是其它语言你就要自己写后台了，在公司，电脑上没装其它编译器。。。
主要功能就是输出数据，这个输出格式就json的数据格式，你自己写觉得麻烦就改成字符串，自己切割一下装入数组，前台代码绑定那修改下就好了
[/Quote]

我后台是用的goahead webserver，一个开源的服务器，要怎么处理？或者还有没有别的办法实现这种局部刷新的？

雷肿么了 2009-12-01

打赏
举报

[Quote=引用 1 楼 bing475879749 的回复:]
LZ可以看这里http://download.csdn.net/source/620233
[/Quote]

杂能这样类。。。赚积分也不要这样啊。

g497772921 2009-11-30

打赏
举报

http://www.world-element.com/World-Element/product.asp?pp=1ajax,其实也可以用一种掩眼法,用js+css做一个假链接也行!你是想这样,进入看看效果

likejun45 2009-11-30

打赏
举报

这个后台代码放Handler.ashx里面...
不过是.net的后台代码，如果你是其它语言你就要自己写后台了，在公司，电脑上没装其它编译器。。。
主要功能就是输出数据，这个输出格式就json的数据格式，你自己写觉得麻烦就改成字符串，自己切割一下装入数组，前台代码绑定那修改下就好了

howema 2009-11-30

打赏
举报

后台代码是放在哪里的？

likejun45 2009-11-30

打赏
举报

前台代码：
<html>
<head>
<title>NAC </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script type="text/javascript" src="jquery-1[1].3.2.min.js"></script>
<script type="text/javascript">
function GetNewTable() {
//获取数据
$.ajax({
type: "post",
url: "Handler.ashx", //获取数据的url
data: { m: 'a' }, //发送的数据(可以不要这项)
success: function(arr) {
arr = eval(arr);

//刷新方式一，当不能确定表格是否会改变时使用，既刷新前的行列数和刷新后的不一定相同
// $("#t1").empty();
// var tableStr = [];
// tableStr.push("<tr><td>", arr[0].name, "</td><td>", arr[1].name, "</td></tr>");

// tableStr = tableStr.join("");
// $("#t1").append(tableStr);

//刷新方式二，既刷新前的行列数和刷新后的一定相同时使用
// var tdArr = $("#t1 td");
// tdArr[0].innerHTML = arr[0].name;
// tdArr[1].innerHTML = arr[1].name;
}
});
}
</script>

</head>
<body text="#000000" link="#000000" vlink="#000000" alink="#000000">
<table id="t1" width="200" border="1">
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table id="t2" width="200" border="1">
<tr>
<td>3 </td>
<td> </td>
</tr>
<tr>
<td>4 </td>
<td> </td>
</tr>
</table>
<input type="button" onclick="GetNewTable()" value="刷新table1" />
</body>
</html>

后台代码：
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler
{

public void ProcessRequest (HttpContext context)
{
char method = Convert.ToChar(context.Request.Params["m"]);
context.Response.ContentType = "text/plain";

string arraryA = "[{name:\"中国\"},{name:\"美国\"},{name:\"英国\"}]";
string arraryB = "[{name:\"中国1\"},{name:\"美国2\"},{name:\"英国3\"}]";
switch (method)
{
case 'a':
context.Response.Write(arraryA);
break;
case 'b':
context.Response.Write(arraryB);
break;
}
}

public bool IsReusable {
get {
return false;
}
}

}

howema 2009-11-30

打赏
举报

就是在点击一个按钮的时候，只刷新t2，不刷新t1。

howema 2009-11-30

打赏
举报

没用过ajax，还是不大懂！
比如我现在又下面一个页面文件：如何只刷新t2，而不刷新t1？
<html>
<head>
<title>NAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body text="#000000" link="#000000" vlink="#000000" alink="#000000">
<table id="t1" width="200" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table id="t2" width="200" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

likejun45 2009-11-27

打赏
举报

用jQuery的话很好实现。
首先页面上两个table。id为table1,table2.
其次data为Ajax请求获得的数据。
刷新
$("#table1").empty();

var tableStr = [];
if(data.length>1){
for(var i=0;i<data.length;++i)
//这里循环显示数据,根据你的数据格式自己修改
tableStr.push("<tr><td>",data[i],"</td></tr>");
}
tableStr = tableStr.join("");
$("#table1").append(tableStr);