jQuery combiné avec AJAX pour charger les données du serveur lorsque la page scrolls_jquery

Introduction

Le texte montrera comment télécharger des données depuis le serveur lors du défilement de la barre de défilement. L'utilisation de la technologie AJAX pour charger des données à partir du serveur peut contribuer à améliorer les performances de n'importe quelle application Web, car lorsque la page est ouverte, un seul écran de données est chargé à partir du serveur. Lorsque davantage de données sont nécessaires, la barre de défilement peut défiler avec le bouton. utilisateur. Ensuite, chargez-le depuis le côté serveur.
Contexte

C'est Facebook qui m'a incité à écrire le code qui charge les données du serveur lorsque la barre de défilement défile. En parcourant Facebook, j'ai été surpris de constater qu'au fur et à mesure que je faisais défiler, de nouvelles données du serveur commençaient à être insérées dans les données existantes. Ensuite, concernant l'utilisation de C# pour implémenter la même fonction, j'ai recherché des informations pertinentes sur Internet, mais je n'ai trouvé aucun article ou blog sur l'utilisation de C# pour implémenter cette fonction. Bien sûr, il existe quelques articles sur les implémentations Java et PHP. Après avoir lu attentivement ces articles, j'ai commencé à écrire du code en c#. Puisque ma version C# fonctionnait avec succès, j'ai pensé la partager, d'où ce message.

Code

Avec seulement quelques lignes de code, nous pouvons charger le scroll. Lors du défilement de la page, une WebMethod sera appelée par le client et renverra le contenu à insérer dans le client. En même temps, sur le client, l'événement scroll sera lié à une fonction client (document.ready). la fonction charge les données du serveur. Parlons en détail de ces deux méthodes côté serveur et côté client ci-dessous.

Méthode côté serveur : Cette méthode est utilisée pour obtenir des données à partir d'une base de données ou d'autres sources de données, et générer une chaîne HTML selon le format du contrôle dans lequel les données doivent être insérées. Ici, je viens d'ajouter un message avec un numéro de séquence.

[WebMéthode]

Copier le code Le code est le suivant :

chaîne statique publique GetDataFromServer()
{
String resp = string.Empty;
pour(int je = 0; je <= 10; je )
{
resp = "

" compteur
" Ce contenu est ajouté dynamiquement "
"au contenu existant lors du défilement.

 ;
>
Retour resp;
>

Si vous souhaitez charger des données depuis la base de données, vous pouvez modifier le code comme suit :

[WebMethod]

Copier le code Le code est le suivant :

公共靜態字串 GetDataFromServer()
    {
        DataSet ds = new DataSet();
 
        // 在這裡設定連接字串的值
        字串 strConnectionString = ""; // 在此處插入您的連線字串值
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // 將選擇指令值寫入第一個參數
        SqlCommand 指令 = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(指令);
int retVal = adp.Fill(ds);
 
        字串 resp = string.Empty;
for (int i = 1; i         {
            string strComment = string.Empty;
if (ds.Tables != null)
            {
if (ds.Tables[0] != null)
                {
if (ds.Tables[0].Rows.Count > 0)
                    {
if (ds.Tables[0].Rows.Count >= i - 1)
                        {
if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)
                            {
                                                            }
                        }
                    }
                }
            }
            resp = "

" 計數器 " " strComment "

";
        }
回傳回應；
    }

客戶端方法：在客戶端，我使用了document.ready方法，並且把div的scroll事件綁定到了這個方法上。我使用了兩個div元素，mainDiv和wrapperDiv，並且給mainDiv註冊了scroll事件，把動態資料插入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)

這個條件將判斷滾動條是否已經到達底部，當它已經移動到了底部時，動態資料網格伺服器端加載，並且插入wrapperDiv。把資料成功插入目標div元素的客戶端腳本將在非同步返回時執行。

 

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

這裡，你會注意到只有在使用者移動滾動到了底部時，請求才會樞紐伺服器端。

我貼了幾張樣圖：

輸出