javascript - 自动刷新 ASP.NET 不闪烁页面

Question

先说说我的流程

我想构建座位预订应用程序(实时)。我使用 c#、ajax、jquery 和 sql-server 作为数据库。我有3页index.html(用户界面)、.js(用于 jQuery、打印座位、座位位置也是 html 和 aspx 的桥梁)和 aspx(操作数据库)

当您运行 Index.html 时，您会看到座位，您可以单击它并输入您的结束时间，然后您的座位颜色将变为红色。如果当前时间与您的结束时间相同，那么您的座位颜色将从红色变回绿色。

预订时座位会变成红色。你的 no seat 和 endTime 将插入到数据库中。当您的结束时间 = 当前时间 - 数据库的字段状态为 0 和 1。0 表示可用，1 表示已预订 - 状态更改为 0。

一切都完成了，但颜色不会变回绿色。而状态已更改为 0。

这是我在 aspx 中的代码。从 .html 和 .js 也没有座位，也没有座位，还从数据库中获取仍然预订座位的数据。

[WebMethod]
    [ScriptMethod(UseHttpGet = true)]
    public static string GetSeat()
    {
        string sql = "";
        SqlConnection conn = DBConnection.getConnection();
        conn.Open();
        sql = "UPDATE booking SET statusBooked = 0 WHERE CONVERT(char(5),[end], 108) = '" + DateTime.Now.ToString("hh:mm") + "'";
        SqlCommand _cdm = new SqlCommand(sql, conn);
        _cdm.ExecuteNonQuery();
        conn.Close();



        List<booking> bookList = new List<booking>();            
        conn.Open();
        sql = "Select noSeat from booking WHERE statusBooked = 1";
        SqlCommand cmd = new SqlCommand(sql, conn);
        SqlDataReader dr = cmd.ExecuteReader();            
        while (dr.Read())
        {
            booking book = new booking();
            book.noSeat = dr[0].ToString();
            book.end =(DateTime) dr[1];
            bookList.Add(book);

        }      

        conn.Close();

        JavaScriptSerializer serializer = new JavaScriptSerializer();            
        return serializer.Serialize(bookList).ToString(); 
    }

这是我在 .js 上的 ajax，它接收预订的座位号并变为红色我把 setInterval 放在文档准备好上。所以它会每 2 秒刷新一次。

setInterval('_ajax()', 2000);






function _ajax()

{

$.ajax({
    url: "Url.aspx/GetSeat",
    type: "GET",
    contentType: "application/json; charset=utf-8",

    success: function (response) {            
        var arr = JSON.parse(response.d);
        console.log(arr);
        objData = new Array();
        objData = arr;
        for (i = 0; i < objData.length; i++) {
            //console.log(objData[i].noSeat);
            jQuery('#' + objData[i].noSeat).addClass('seat-booked');
            jQuery('#class-' + objData[i].noSeat).attr('value', 'seat-booked');
            jQuery('#' + objData[i].noSeat).removeClass('seat-availiable');
            jQuery('#' + objData[i].noSeat).removeClass('selected');

        }
    },
    error: function () {
        alert("sorry, there was a problem!");
        console.log("error");
    },
    complete: function () {
        console.log("complete");
    }

});

它应该自动为绿色，因为我只发送从 aspx 预订的座位数，而在 .js 中，如果 noseat 等于我从 .aspx 发送的数据，我只会更改为红色但如果我手动重新加载 Index.html。座位变成绿色。它有效但不是自动的。我曾经使用 html refres 元标记，并在 page_load 上重新加载，但它使页面闪烁。我希望它不闪烁地刷新。

Answer 1

为什么不在客户端控制这种变化，而不是每次都将数据发送回服务器？

通过这样做，您可以避免每 2 秒发送大量服务器请求。

但是，如果您仍想遵循您的方法，我建议您仅在更换座位(而不是页面中的所有座位)时执行 ajax。当您单击一个座位并设置结束时间值时，您可以调用您的 ajax 告诉数据库此时某个特定的座位已被预订。

我建议您的另一种方法是:每次在 ajax 调用中获得结果时，您都可以将页面中的所有座位设置为“可用”

(jQuery('your-common-seat-class').removeClass('seat-booked').addClass('seat-availiable');

并且对于您的响应数据中的每个座位，您将它们设置为已预订。

for (i = 0; i < objData.length; i++) {
    //console.log(objData[i].noSeat);
    jQuery('#' + objData[i].noSeat).addClass('seat-booked');
    jQuery('#class-' + objData[i].noSeat).attr('value', 'seat-booked');
}