Ajax轮询

来源：互联网发布：淘宝上的伟哥药能买吗编辑：程序博客网时间：2024/06/07 19:20

前台的HTML代码：

[javascript] view plaincopy
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainTalk.aspx.cs" Inherits="wj_test.Talk.mainTalk" %>  
<!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></title>  
    <mce:script src="../Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script>  
    <mce:style><!--  
        body  
        {  
            font-size: 12px;  
        }  
        #content  
        {  
            width: 200px;  
            height: 50px;  
            border: solid 1px #dedede;  
            background-color: #eee;  
        }  
        #news  
        {  
            width: 200px;  
            height: 13px;  
            font-weight: bold;  
        }  
        li  
        {  
            height: 16px;  
            line-height: 16px;  
            list-style: none;  
            color: #226B19;  
        }  
        a  
        {  
            text-decoration: none;  
            color: #9E3423;  
        }  
      
--></mce:style><style mce_bogus="1">        body  
        {  
            font-size: 12px;  
        }  
        #content  
        {  
            width: 200px;  
            height: 50px;  
            border: solid 1px #dedede;  
            background-color: #eee;  
        }  
        #news  
        {  
            width: 200px;  
            height: 13px;  
            font-weight: bold;  
        }  
        li  
        {  
            height: 16px;  
            line-height: 16px;  
            list-style: none;  
            color: #226B19;  
        }  
        a  
        {  
            text-decoration: none;  
            color: #9E3423;  
        }  
    </style>  
    <mce:script type="text/javascript"><!--  
        function getData() {//获取留言数据  
            var temp = "";  
            $.getJSON("Data.aspx", { ID: "2", time: new Date() }, function (json) {//利用ajax返回json的方式  
                if (json.length > 0) {//返回有数据  
                    $("#news").html(" <font color='Red'>有新消息：</font>");  
                    for (var i = 0; i < json.length; i++) {//循环json，生成需要的标签  
                        temp += "<li id='" + json[i].ID + "' ><img src="../img/t.gif" mce_src="img/t.gif" style='height: 14px; width: 14px' /><a  href="#" mce_href="#" onclick='getHref(" + json[i].ID + "); return false;' >" + json[i].SendID + "给您留言了</a></li>";  
                    }  
                    $("#info li").remove(); //移除之前的元素li  
                    $("#info").append(temp); //追加新的  
                    $("li").hide(); //隐藏全部，只显示前2条  
                    $("li:eq(0)").show();  
                    $("li:eq(1)").show();  
                }  
                else {  
                    $("#news").html(" <font color='#999'>无新消息：</font>"); //无数据时的提示  
                }  
            })  
        };  
        $(function () {//间隔3s自动加载一次  
            getData(); //首次立即加载  
            window.setInterval(getData, 3000); //循环执行！！  
            }  
         );  
        function getHref(id) {//重定向页面并且移除当前li标签  
            location.href = 'ShowAndRe.aspx?ID=' + id;  
            $(document.getElementById(id)).remove();  
        }  
      
// --></mce:script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div id="content">  
        <div id="news">  
        </div>  
        <ul id="info" style="margin: 0 0 0 0;" mce_style="margin: 0 0 0 0;">  
        </ul>  
    </div>  
    </form>  
</body>  
</html>  

后台的C#代码，获取数据：

[c-sharp] view plaincopy
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Data.SqlClient;  
using System.Data;  
using System.Text;  
namespace wj_test.Talk  
{  
    public partial class Data : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Request.QueryString["ID"] != null)  
            {  
                string id = Request.QueryString["ID"].ToString();  
                SqlConnection scn = new DB().getDB();  
                scn.Open();  
                string str = "select * from test_talk where Station=0 and ReID="+id+" order by ID desc";  
                SqlDataAdapter ada = new SqlDataAdapter(str, scn);  
                DataTable dt = new DataTable();  
                ada.Fill(dt);  
                scn.Close();  
                if (dt.Rows.Count > 0)  
                {  
                    string json = DataTable2Json(dt);  
                    Response.Write(json);  
                }  
                else  
                    Response.Write("{}");//为空时返回{} 使json对象的length=0  
            }  
        }  
        public static string DataTable2Json(DataTable dt)  
        {  
            StringBuilder jsonBuilder = new StringBuilder();  
            jsonBuilder.Append("[");  
            for (int i = 0; i < dt.Rows.Count; i++)  
            {  
                jsonBuilder.Append("{");  
                for (int j = 0; j < dt.Columns.Count; j++)  
                {  
                    jsonBuilder.Append("/"");  
                    jsonBuilder.Append(dt.Columns[j].ColumnName);  
                    jsonBuilder.Append("/":/"");  
                    jsonBuilder.Append(dt.Rows[i][j].ToString());  
                    jsonBuilder.Append("/",");  
                }  
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
                jsonBuilder.Append("},");  
            }  
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
            jsonBuilder.Append("]");  
            return jsonBuilder.ToString();  
        }    
    }  
}  

0 0