Laksanakan fungsi memuatkan data secara automatik apabila halaman menatal ke hujung berdasarkan jquery

Kini, Weibo, WeChat atau aplikasi lain yang sering kita gunakan mempunyai fungsi pemuatan tak segerak Secara ringkasnya, apabila kita menyemak imbas Weibo atau WeChat, selepas beralih ke bahagian atas atau bawah antara muka, program ini melepasi pemuatan asynchronous Kaedah ini mempercepatkan. pemuatan data kerana ia hanya memuatkan sebahagian daripada data setiap kali Apabila kami mempunyai sejumlah besar data tetapi tidak dapat memaparkan kesemuanya, kami boleh mempertimbangkan untuk menggunakan kaedah tak segerak untuk memuatkan data.

Pemuatan data tak segerak boleh berlaku secara automatik apabila pengguna mengklik butang "Lihat Lagi" atau bar skrol menatal ke bahagian bawah tetingkap dalam catatan blog seterusnya, kami akan memperkenalkan cara melaksanakan fungsi memuatkan lebih banyak secara automatik .

Rajah 1 Weibo memuatkan lebih banyak fungsi

Teks

Andaikan data mesej pengguna disimpan dalam pangkalan data kami Sekarang, kami perlu membuka antara muka API dalam bentuk Perkhidmatan Web untuk pelanggan memanggil. untuk membiarkan pelanggan memanggil (Sila rujuk di sini untuk butiran).

Helaian Data
Mula-mula, kami mencipta jadual data T_Paginate dalam pangkalan data, yang mengandungi tiga medan ID, Nama dan Mesej, dengan ID ialah nilai kenaikan automatik.

CREATE TABLE [dbo].[T_Paginate](
  [ID] [int] IDENTITY(1,1) NOT NULL,
  [Name] [varchar](60) COLLATE Chinese_PRC_CI_AS NULL,
  [Message] [text] COLLATE Chinese_PRC_CI_AS NULL,
 CONSTRAINT [PK_T_Paginate] PRIMARY KEY CLUSTERED 
(
  [ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

Salin selepas log masuk

Rajah 2 Jadual data T_Paginate

Model Objek Data
Kami mentakrifkan model objek data Mesej berdasarkan jadual data T_Paginate, yang mengandungi tiga medan: Id, Nama dan Ulasan Definisi khusus adalah seperti berikut:

/// <summary>
/// The message data object.
/// </summary>
[Serializable]
public class Message
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string Comment { get; set; }
}

Salin selepas log masuk

Kaedah Perkhidmatan Web
Sekarang, kita perlu melaksanakan kaedah GetListMessages(), yang memperoleh data paging yang sepadan berdasarkan bilangan paging yang diluluskan oleh klien dan mengembalikannya kepada klien dalam format JSON Sebelum melaksanakan GetListMessages() kaedah, kami Pertama, kami akan memperkenalkan kaedah pertanyaan paging data.

Dalam pangkalan data Mysql, kami boleh menggunakan fungsi had untuk melaksanakan pertanyaan paging data, tetapi tiada fungsi serupa yang disediakan dalam SQL Server Kemudian, kami boleh menggunakan inisiatif subjektif kami - melaksanakannya sendiri Pelaksanaan khusus adalah seperti berikut :

Declare @Start AS INT
Declare @Offset AS INT
;WITH Results_CTE AS (
  SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum 
FROM T_Paginate WITH(NOLOCK))
SELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

Salin selepas log masuk

Di atas kami mentakrifkan ungkapan jadual biasa Results_CTE, yang memperoleh data dalam jadual T_Paginate dan mengisihnya mengikut nilai ID dari kecil ke besar, dan kemudian memberikan nilai ROW_NUMBER mengikut susunan ini, di mana @Start dan @Offset ialah julat data untuk ditanya .

Seterusnya, mari kita laksanakan kaedah GetListMessages(), pelaksanaan khusus adalah seperti berikut:

/// <summary>
/// Get the user message.
/// </summary>
/// <param name="groupNumber">the pagination number</param>
/// <returns>the pagination data</returns>
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetListMessages(int groupNumber)
{
  string query = string.Format("WITH Results_CTE AS (SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum " +
                 "FROM T_Paginate WITH(NOLOCK)) " +
                 "SELECT * FROM Results_CTE WHERE RowNum BETWEEN '{0}' AND '{1}';",
(groupNumber - 1) * Offset + 1, Offset * groupNumber);
  var messages = new List<Message>();
  using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["RadditConn"].ToString()))
  using (var com = new SqlCommand(query, con))
  {
    con.Open();
    using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection))
    {
      while (reader.Read())
      {
        var message = new Message
          {
            Id = (int)reader["ID"],
            Name = (string)reader["Name"],
            Comment = (string)reader["Message"]
          };
        messages.Add(message);
      }
    }

    // Returns json data.
    return new JavaScriptSerializer().Serialize(messages);
  }
}

Salin selepas log masuk

Di atas, kami mentakrifkan kaedah GetListMessages() demi kesederhanaan, kami menulis operasi pangkalan data secara langsung pada Perkhidmatan Web. Harap maafkan saya cipta Objek JavaScriptSerializer mensiri data ke dalam format JSON dan mengembalikannya kepada klien.

Javascript
Memandangkan kami memanggil API Perkhidmatan Web tempatan, kami menghantar permintaan asal yang sama untuk memanggil antara muka API (contoh permintaan silang asal Pelaksanaan khusus adalah seperti berikut:

$.getData = function(options) {

  var opts = $.extend(true, {}, $.fn.loadMore.defaults, options);

  $.ajax({
    url: opts.url,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{groupNumber:" + opts.groupNumber + "}",
    success: function(data, textStatus, xhr) {
      if (data.d) {
        // We need to convert JSON string to object, then
        // iterate thru the JSON object array.
        $.each($.parseJSON(data.d), function() {
          $("#result").append('<li id="">' +
              this.Id + ' - ' + '<strong>' +
              this.Name + '</strong>' + ' —&#63;' + '<span class="page_message">' +
              this.Comment + '</span></li>');
        });
        $('.animation_image').hide();
        options.groupNumber++;
        options.loading = false;
      }
    },
    error: function(xmlHttpRequest, textStatus, errorThrown) {
      options.loading = true;
      console.log(errorThrown.toString());
    }
  });
};

Salin selepas log masuk

Di atas, kami menentukan kaedah getData(), yang menggunakan kaedah jQuery.ajax() untuk menghantar permintaan asal yang sama untuk memanggil antara muka GetListMessages Apabila data berjaya dimuatkan dan dipaparkan dalam div hasil, paging nombor (groupNumber) ditambah satu.

Sekarang, kami telah melaksanakan kaedah getData() Setiap kali pengguna menyeret bar skrol ke bawah, kaedah getData() dipanggil untuk mendapatkan data Kemudian, kami perlu menggabungkan kaedah getData(). acara bar skrol Mengikat, pelaksanaan khusus adalah seperti berikut:

// The scroll event.
$(window).scroll(function() {
  // When scroll at bottom, invoked getData() function.
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    if (trackLoad.groupNumber <= totalGroups && !trackLoad.loading) {
      trackLoad.loading = true;   // Blocks other loading data again.
      $('.animation_image').show();
      $.getData(trackLoad);
    }
  }
});

Salin selepas log masuk

Di atas, kami melaksanakan acara tatal jQuery Apabila bar tatal menatal ke bawah, kaedah getData() dipanggil untuk mendapatkan data dalam pelayan.

Gaya CSS
Seterusnya, kami menambah gaya CSS pada program, yang ditakrifkan secara khusus seperti berikut:

@import url("reset.css");
body,td,th {font-family: 'Microsoft Yahei', Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#result{width: 500px;margin-right: auto;margin-left: auto;}
#result ol{margin: 0px;padding: 0px;}
#result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

Salin selepas log masuk

Gambar 3 Memuatkan lebih banyak program

Di atas, kami melaksanakan jQuery untuk memuatkan lebih banyak program secara automatik dan menghantar permintaan tak segerak untuk mendapatkan data daripada pelayan apabila bar skrol mencapai bahagian bawah.

Kami memperkenalkan pemuatan data tak segerak melalui jQuery melalui program Demo Sudah tentu, ia juga melibatkan pertanyaan halaman data Di sini kami menggunakan ungkapan jadual biasa tersuai Results_CTE untuk mendapatkan data penomboran, dan kemudian, melalui $.ajax(. ) kaedah menghantar permintaan asal yang sama untuk memanggil API Perkhidmatan Web apabila data berjaya diperoleh, data dikembalikan dalam format JSON Akhirnya, kami memaparkan data pada halaman.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.