JQuery melaksanakan kesan pengundian pelayan mudah example

JQuery melaksanakan kesan pengundian pelayan mudah example_jquery

WBOY

Lepaskan： 2016-05-16 15:07:15

asal

1176 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JQuery melaksanakan kesan tinjauan pelayan yang mudah. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Selepas memasuki banyak forum, gesaan muncul yang menyatakan bilangan e-mel yang belum dibaca, atau sistem oa menggesa bilangan tugasan yang belum diselesaikan selepas masuk. Ia akan menggesa sekali-sekala, tetapi bagaimana untuk melaksanakannya. Malah, ia akan menjadi agak mudah untuk menggunakan jquery Elemen teras ialah fungsi penghuraian format json dan setInterval(). Mari kita laksanakannya bersama-sama:

Pertama, halaman default.aspx kami kelihatan seperti ini:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
  <link href="Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
  <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
  <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  <script src="js/src/grid.base.js" type="text/javascript"></script>
  <script type="text/javascript">
  function showUnreadNews()
  {
    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "Result.ashx",
        dataType: "json",
        success: function(msg) {
          //alert(msg);
          $.each(msg, function(id, title) {
            $("#news").append("<a href=detailnews.aspx&#63;id=" + id + ">" + title + "</a><br>");
          });
        }
      });
    });
  }
  setInterval('showUnreadNews()',5000);
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="news">
  </div>
  </form>
</body>
</html>

Salin selepas log masuk

Kod di atas terutamanya menggunakan fungsi ajax untuk mengeluarkan permintaan ajax ke halaman Result.ashx, dan kemudian halaman Result.ashx mengembalikan data json dan menghuraikannya Akhirnya, fungsi setInterval() digunakan untuk mencapai kesan pengundian. Halaman Result.ashx khusus Kodnya adalah seperti berikut:

<%@ WebHandler Language="C#" Class="Result" %>
using System;
using System.Web;
using System.Text;
using System.Data.SQLite;
using System.Data;
public class Result : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    string sql = "select * from Content where NewsFlag=0";
    DataTable dt = new DataTable();
    using (SQLiteConnection conn = new SQLiteConnection(InitSQLite().Connection))
    {
      SQLiteDataAdapter sda = new SQLiteDataAdapter(sql, conn);
      sda.Fill(dt);
    }
    string jsonStr = GetJson(dt);
    context.Response.ContentType = "text/json";
    context.Response.Buffer = true;
    context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
    context.Response.AddHeader("pragma", "no-cache");
    context.Response.AddHeader("cache-control", "");
    context.Response.CacheControl = "no-cache";
    context.Response.Write(jsonStr);
  }
  public static string GetJson(DataTable dt)
  {
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
      jsonBuilder.Append( dt.Rows[i]["NewsID"].ToString() + ":" +"\""+ dt.Rows[i]["NewsTitle"].ToString()+"\",");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();
  }
  public Sqlite InitSQLite()
  {
    Sqlite _sqLite = new Sqlite();
    _sqLite.ConnetStringBuilder.DataSource = AppDomain.CurrentDomain.BaseDirectory + "News.db3";
    _sqLite.ConnetStringBuilder.Pooling = true;
    _sqLite.ConnetStringBuilder.FailIfMissing = true;
    _sqLite.ConnetStringBuilder.UseUTF16Encoding = true;
    return _sqLite;
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

Salin selepas log masuk

Pangkalan data menggunakan sqlite, sila semak diri anda untuk penggunaan khusus. Dalam fail pemprosesan ini, perkara yang paling penting ialah menjana data json yang mematuhi format daripada data boleh data.

Dengan cara ini, sistem akhirnya dilaksanakan Setiap 5 saat, halaman utama akan meninjau pelayan untuk data untuk mendapatkan data terkini.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kesan dan teknik penukaran JQuery", "kesan seretan jQuery dan ringkasan teknik", "Ringkasan kemahiran sambungan JQuery", "ringkasan kesan khas klasik biasa jQuery", "ringkasan penggunaan animasi jQuery dan kesan khas", "Ringkasan penggunaan pemilih jquery " dan "Ringkasan pemalam dan penggunaan biasa jQuery "

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.