ajax 数据库中随机读取5条数据动态在页面中刷新

更新时间：2009年06月12日 19:32:34 作者：

以下是我在此编写一个程序时的时刻所遇到的问题。因为一开始经理给我分配了要我写一个在页面上动态的显示5条数据。

不能用数据库中的Top,后面发现了用这样一个方法可以实现。。。现就这个方法总结写了一个页面。有兴趣的朋友们可以一起学习下。。。。
前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxRandomData.aspx.cs" Inherits="ajaxRandomData" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>ajax随机生成数据</title> 
<script language="javascript" type="text/javascript" src="ajax/jquery.js"></script> 
<script > 
//页面的初始化 
$(document).ready(function(){randomData()}); 
//页面初始化函数 
function randomData() 
{ 
$.ajax({ 
type:'POST', 
url:'ajaxRandomData.aspx', 
data:{action:'randon'}, 
success:randomDatacallbace 
}); 
} 
// 页面初始化回调函数 
function randomDatacallbace(data) 
{ 
if(data=="") 
{ 
alert("暂时不能为您生成数据"); 
$("#randomData").html("暂时不能为您生成数据"); 
} 
else 
{ 
$("#randomData").html(data); 
randomtime();//每隔5秒钟执行一次 
} 
} 
//动态变化页面中显示的数据。 
function randomtime() 
{ 
setTimeout(function(){randomData()},2000) 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="text-align:center" id="randomData"> 
</div> 
</form> 
</body> 
</html>

后台代码：

复制代码代码如下:

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.Data.SqlClient; 
using System.Text; 
public partial class ajaxRandomData : System.Web.UI.Page 
{ 
string StrAction = ""; 
protected void Page_Load(object sender, EventArgs e) 
{ 
StrAction=Request["action"]; 
if(StrAction=="randon") 
{ 
InitData(); 
} 
} 
/// <summary> 
///创建人：周昕 
/// 创建时间：2009-6-9 
/// 方法名称：InitData 
/// 方法作用：动态的生成表格并随机的生成5条数据 
/// </summary> 
public void InitData() 
{ 
SqlConnection mycon = new SqlConnection(); 
mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString(); 
//随机生成数据的关键 
string sql = "select top 5 *,newid() from loginuser order by newid()"; 
SqlDataAdapter myda = new SqlDataAdapter(sql, mycon); 
DataSet myset = new DataSet(); 
myda.Fill(myset); 
DataTable mytable = myset.Tables[0]; 
int n = mytable.Rows.Count; 
StringBuilder str = new StringBuilder(); 
str.Append("<table style='text-align:left;color:red;width:600px'><tr style='color:#00FF00;font-size:40px;text-align:center'><td colspan='3'>动态刷新用户信息</td></tr><tr style='color:#6600FF'><td style='text-align:left;width:100px'>用户名</td><td style='text-align:left;width:200px'>用户全名</td><td style='width:250px'>电子油箱</td></tr>"); 
for (int i = 0; i < n; i++) 
{ 
string username = mytable.Rows[i]["username"].ToString(); 
string fullname = mytable.Rows[i]["FullName"].ToString(); 
string email = mytable.Rows[i]["Email"].ToString(); 
if (i % 2 != 0) 
{ 
str.Append("<tr><td>" + username + "</td>"); 
str.Append("<td>" + fullname + "</td>"); 
str.Append("<td>" + email + "</td></tr>"); 
} 
else 
{ 
str.Append("<tr style='color:blue'><td>" + username + "</td>"); 
str.Append("<td>" + fullname + "</td>"); 
str.Append("<td>" + email + "</td></tr>"); 
} 
} 
str.Append("</table>"); 
Response.Clear(); 
Response.ContentType = "application/text"; 
Response.Write(str); 
Response.End(); 
} 
}

效果图

您可能感兴趣的文章:

ajax的json传值方式在jsp页面中的应用
ajax的json传值想必大家早有所耳闻了吧，本文介绍下jsp页面中json传值应用，感兴趣的你可以参考下哈，希望可以帮助到你
2013-03-03
Ajax+js实现异步交互
本文给大家分享的是原生javascript结合ajax实现的异步交互的方法和代码，非常的简单实用，有需要的小伙伴可以参考下。
2016-01-01
SpringMVC环境下实现的Ajax异步请求JSON格式数据
这篇文章主要介绍了SpringMVC环境下实现的Ajax异步请求JSON格式数据的相关资料,需要的朋友可以参考下
2016-05-05
Ajax请求跨域问题解决方案分析
这篇文章主要介绍了Ajax请求跨域问题解决方案,结合具体实例形式分析了Ajax请求跨域问题的原理、解决方法及相关操作注意事项,需要的朋友可以参考下
2019-05-05
Ajax 向数据库修改和添加功能(较简答)
这篇文章主要介绍了Ajax 向数据库修改和添加功能(较简答)，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
ajax从JSP传递对象数组到后台的方法
今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
浅析IE针对Ajax请求结果的缓存问题
我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存。在一个空ASP.NET MVC应用中我们定义了如下一个默认的HomeController，其中包含一个返回当前时间的Action方法GetCurrentTime。
2015-09-09
如何使用ajax开发web应用程序
如何使用ajax开发web应用程序...
2006-09-09
Ajax实现省市区三级级联(数据来自mysql数据库)
这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
ajax实时任务提示功能的实现代码
本项目运用了 FLEAPHP,MYSQL,SMARTY,FCKEDItor,JSON,PROTOTYPE的技术,在这里首先要感谢这些开源项目的开发者给我们带来的好东西,其次要感谢[生气猪--让我帮她做一个这样的小东西来提醒她按时完成事情].花了一个3个小时完成.希望给大家起到抛砖引玉的作用啊....
2008-09-09