ajax從資料庫中隨機讀取5條資料動態在頁面中重新整理

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

以下是我在此編寫一個程式時的時刻所遇到的問題。因為一開始經理給我分配了要我寫一個在頁面上動態顯示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();
    }
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More