Implementieren Sie die Funktion zum automatischen Laden von Daten, wenn die Seite basierend auf jquery_jquery bis zum Ende scrollt

Jetzt verfügen Weibo, WeChat und andere Anwendungen, die wir häufig verwenden, über asynchrone Ladefunktionen. Kurz gesagt: Wenn wir Weibo oder WeChat durchsuchen, durchläuft das Programm das asynchrone Laden, nachdem es an den oberen oder unteren Rand der Benutzeroberfläche verschoben wurde das Laden von Daten, da jedes Mal nur ein Teil der Daten geladen wird. Wenn wir eine große Datenmenge haben, diese aber nicht vollständig anzeigen können, können wir die Verwendung der asynchronen Methode zum Laden der Daten in Betracht ziehen.

Das asynchrone Laden von Daten kann automatisch erfolgen, wenn der Benutzer auf die Schaltfläche „Mehr anzeigen“ klickt oder die Bildlaufleiste zum unteren Rand des Fensters scrollt. Im nächsten Blogbeitrag stellen wir vor, wie die Funktion zum automatischen Laden weiterer Daten implementiert wird .

Abbildung 1 Weibo lädt weitere Funktionen

Text

Angenommen, die Nachrichtendaten des Benutzers sind in unserer Datenbank gespeichert. Jetzt müssen wir die API-Schnittstelle in Form eines Webdienstes öffnen, damit der Client sie aufrufen kann. Natürlich können wir auch einen allgemeinen Handler (ASHX-Datei) verwenden. um den Kunden anrufen zu lassen (Einzelheiten finden Sie hier).

Datenblatt
Zuerst erstellen wir die Datentabelle T_Paginate in der Datenbank, die drei Felder ID, Name und Nachricht enthält, wobei ID ein automatisch inkrementierender Wert ist.

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]

Abbildung 2 Datentabelle T_Paginate

Datenobjektmodell
Wir definieren das Datenobjektmodell Message basierend auf der Datentabelle T_Paginate, die drei Felder enthält: Id, Name und Comment. Die spezifische Definition lautet wie folgt:

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

Web-Service-Methode
Jetzt müssen wir die Methode GetListMessages() implementieren, die die entsprechenden Paging-Daten basierend auf der vom Client übergebenen Anzahl von Paging-Daten erhält und sie im JSON-Format an den Client zurückgibt, bevor wir GetListMessages() implementieren. Methode, wir Zuerst stellen wir die Methode der Daten-Paging-Abfrage vor.

In der MySQL-Datenbank können wir die Limit-Funktion verwenden, um Daten-Paging-Abfragen zu implementieren, aber es gibt keine ähnliche Funktion in SQL Server. Dann können wir unsere subjektive Initiative nutzen – implementieren Sie eine selbst. Die spezifische Implementierung ist wie folgt :

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

Oben haben wir den allgemeinen Tabellenausdruck Results_CTE definiert, der die Daten in der T_Paginate-Tabelle abruft, sie entsprechend dem ID-Wert von klein nach groß sortiert und dann ROW_NUMBER-Werte entsprechend dieser Reihenfolge zuweist, wobei @Start und @Offset sind der abzufragende Datenbereich.

Als nächstes implementieren wir die Methode GetListMessages(). Die spezifische Implementierung lautet wie folgt:

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

Oben haben wir die Methode GetListMessages() der Einfachheit halber direkt im Webdienst geschrieben. Sie erhält die Paging-Daten durch den Aufruf des allgemeinen Tabellenausdrucks Results_CTE Ein JavaScriptSerializer-Objekt erstellen serialisiert Daten in das JSON-Format und gibt sie an den Client zurück.

Javascript
Da wir die lokale Webdienst-API aufrufen, senden wir eine Same-Origin-Anfrage zum Aufrufen der API-Schnittstelle (Beispiel für eine Cross-Origin-Anfrage). Die spezifische Implementierung lautet wie folgt:

$.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());
    }
  });
};

Oben haben wir die Methode getData() definiert, die die Methode jQuery.ajax() verwendet, um eine Anfrage mit demselben Ursprung zu senden, um die GetListMessages-Schnittstelle aufzurufen. Wenn die Daten erfolgreich geladen und im Ergebnis-Div angezeigt werden, wird das Paging durchgeführt Nummer (groupNumber) wird um eins erhöht.

Jetzt haben wir die Methode getData() implementiert. Immer wenn der Benutzer die Bildlaufleiste nach unten zieht, wird die Methode getData() aufgerufen, um die Daten abzurufen Scrollbar-Ereignis. Die spezifische Implementierung lautet wie folgt:

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

Oben haben wir das Scroll-Ereignis von jQuery implementiert. Wenn die Scroll-Leiste nach unten scrollt, wird die Methode getData() aufgerufen, um die Daten auf dem Server abzurufen.

CSS-Stil
Als nächstes fügen wir dem Programm CSS-Stile hinzu, die konkret wie folgt definiert sind:

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

Bild 3 Weitere Programme werden geladen

Oben haben wir jQuery implementiert, um automatisch weitere Programme zu laden und eine asynchrone Anfrage zum Abrufen von Daten vom Server zu senden, wann immer die Bildlaufleiste den unteren Rand erreicht.

Wir haben das asynchrone Laden von Daten über jQuery über ein Demoprogramm eingeführt. Natürlich beinhaltet es auch eine Seitenabfrage von Daten. Hier verwenden wir einen benutzerdefinierten allgemeinen Tabellenausdruck Results_CTE, um paginierte Daten zu erhalten, und dann über The $.ajax(. )-Methode sendet eine Same-Origin-Anfrage zum Aufrufen der Webdienst-API; wenn die Daten erfolgreich abgerufen wurden, werden die Daten im JSON-Format zurückgegeben. Schließlich zeigen wir die Daten auf der Seite an.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.