cari

Rumah >hujung hadapan web >tutorial js >JQuery melaksanakan kesan pengundian pelayan mudah example_jquery

JQuery melaksanakan kesan pengundian pelayan mudah example_jquery

WBOY
WBOYasal
2016-05-16 15:07:151203semak imbas

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>

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;
    }
  }
}

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melaksanakan jquery $.trim() untuk mengalih keluar ruang rentetan [dengan legenda]_jqueryArtikel seterusnya：Bagaimana untuk melaksanakan jquery $.trim() untuk mengalih keluar ruang rentetan [dengan legenda]_jquery

Artikel berkaitan

Lihat lagi