jQuery kombiniert mit AJAX, um Daten vom Server zu laden, wenn die Seite scrollt_jquery

Einleitung

Der Text zeigt, wie man beim Scrollen der Bildlaufleiste Daten vom Server herunterlädt. Die Verwendung der AJAX-Technologie zum Laden von Daten vom Server kann dazu beitragen, die Leistung jeder Webanwendung zu verbessern, da beim Öffnen der Seite nur ein Bildschirm mit Daten vom Server geladen wird. Wenn mehr Daten benötigt werden, kann mit der Bildlaufleiste gescrollt werden Laden Sie es dann von der Serverseite.
Hintergrund

Es war Facebook, das mich dazu veranlasste, den Code zu schreiben, der Daten vom Server lädt, wenn die Bildlaufleiste scrollt. Beim Surfen auf Facebook war ich überrascht, dass beim Scrollen neue Daten vom Server in die vorhandenen Daten eingefügt wurden. Dann suchte ich bezüglich der Verwendung von C# zur Implementierung derselben Funktion im Internet nach relevanten Informationen, fand jedoch keine Artikel oder Blogs zur Verwendung von C# zur Implementierung dieser Funktion. Natürlich gibt es einige Artikel zu Java- und PHP-Implementierungen. Nachdem ich diese Artikel sorgfältig gelesen hatte, begann ich, Code in C# zu schreiben. Da meine C#-Version erfolgreich lief, dachte ich, ich würde sie teilen, daher dieser Beitrag.

Code

Mit nur wenigen Codezeilen können wir beim Scrollen laden. Beim Scrollen der Seite wird vom Client eine WebMethod aufgerufen, die den in den Client einzufügenden Inhalt zurückgibt. Gleichzeitig wird auf dem Client das Scroll-Ereignis an eine Client-Funktion (document.ready This) gebunden Funktion lädt Daten vom Server. Lassen Sie uns im Folgenden ausführlich über diese beiden serverseitigen und clientseitigen Methoden sprechen.

Serverseitige Methode: Diese Methode wird verwendet, um Daten aus einer Datenbank oder anderen Datenquellen abzurufen und eine HTML-Zeichenfolge entsprechend dem Format des Steuerelements zu generieren, in das die Daten eingefügt werden sollen. Hier habe ich gerade eine Nachricht mit einer Sequenznummer hinzugefügt.

[WebMethod]

Code kopieren Der Code lautet wie folgt:

öffentliche statische Zeichenfolge GetDataFromServer()
{
String resp = string.Empty;
for(int i = 0; i 03d8ca27b23ec8e8e559bdf007f55c1945a2772a6b6107b401db3c9b82c049c2" Zähler
„54bdf357c58b8a65c66d7c19c8e4d114 Dieser Inhalt wird dynamisch angehängt“
„zum vorhandenen Inhalt beim Scrollen.94b3e26ee717c64999d7867364b1b4a3“ ;
}
Zurück bzw.
}

Wenn Sie Daten aus der Datenbank laden möchten, können Sie den Code wie folgt ändern:

[WebMethod]

Code kopieren Der Code lautet wie folgt:

chaîne statique publique GetDataFromServer()
    {
        DataSet ds = nouveau DataSet();
 
        // Définissez la valeur de la chaîne de connexion ici
        chaîne strConnectionString = "" ; // Insérez la valeur de votre chaîne de connexion ici
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // Écrivez la valeur de la commande select comme premier paramètre
        Commande SqlCommand = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(command);
int retVal = adp.Fill(ds);
 
        string resp = string.Empty;
pour (int i = 1; i 07752a49fe320d86ef2403125be90d1b 0)
                    {
si (ds.Tables[0].Rows.Count >= i - 1)
                        {
if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)
                            {
                                strComment = ds.Tables[0].Rows[i - 1][0].ToString();
                            >
                        >
                    >
                >
            >
            resp = "e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2" compteur "54bdf357c58b8a65c66d7c19c8e4d114 " strComment "94b3e26ee717c64999d7867364b1b4a3";
        >
retour resp;
    >

Il s'agit d'un document.ready. Par exemple, mainDiv et wrapperDiv, et mainDiv avec scroll事件, respectivement动态数据插入到wrapperDiv中。

$(document).ready(
function()
{
$contentLoadTriggered = false;
$("#mainDiv").scroll(
function()
{
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() -
  $("#mainDiv").height()) &&
  $contentLoadTriggered == false)
  $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax(
{
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert("The call to the server side failed. " +
x.responseText);
}
}
);
}
}
);
}
);

这里，为检查滚动条是否已经移动到了底部，使用了下面的条件判断，
 

if($("#mainDiv").scrollTop() >=
 ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
  $contentLoadTriggered == false)

这个条件将判断滚动条是否已经到达了底部，从服务器Il s'agit d'un document wrapperDiv.时执行。
 

success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}

这里，你将注意到只有在用户移动滚动到了底部时，请求才会送到服务器端。

我粘贴了几个样图：
Sortie