Implémenter la fonction de chargement automatique des données lorsque la page défile jusqu'à la fin en fonction de jquery_jquery

Désormais, Weibo, WeChat ou d'autres applications que nous utilisons souvent ont des fonctions de chargement asynchrone. Bref, lorsque nous parcourons Weibo ou WeChat, après s'être déplacé vers le haut ou le bas de l'interface, le programme passe le chargement asynchrone. Cette méthode accélère. le chargement des données car il ne charge qu'une partie des données à chaque fois. Lorsque nous avons une grande quantité de données mais que nous ne pouvons pas les afficher toutes, nous pouvons envisager d'utiliser la méthode asynchrone pour charger les données.

Le chargement asynchrone des données peut se produire automatiquement lorsque l'utilisateur clique sur le bouton « Afficher plus » ou que la barre de défilement défile vers le bas de la fenêtre ; dans le prochain article de blog, nous présenterons comment implémenter la fonction de chargement automatique de davantage de données ; .

Figure 1 Weibo charge plus de fonctions

Texte

Supposons que les données du message de l'utilisateur soient stockées dans notre base de données. Nous devons maintenant ouvrir l'interface API sous forme de service Web pour que le client puisse l'appeler. Bien sûr, nous pouvons également utiliser un gestionnaire général (fichier ASHX). pour permettre au client d'appeler (veuillez vous référer ici pour plus de détails).

Fiche technique
Tout d'abord, nous créons la table de données T_Paginate dans la base de données, qui contient trois champs ID, Nom et Message, où ID est une valeur d'auto-incrémentation.

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]

Figure 2 Tableau de données T_Paginate

Modèle objet de données
Nous définissons le modèle d'objet de données Message basé sur la table de données T_Paginate, qui contient trois champs : Id, Name et Comment. La définition spécifique est la suivante :

.

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

Méthode de service Web
Maintenant, nous devons implémenter la méthode GetListMessages(), qui obtient les données de pagination correspondantes en fonction du nombre de pagination transmises par le client et les renvoie au client au format JSON avant d'implémenter GetListMessages(). méthode, nous allons d'abord présenter la méthode de requête de pagination de données.

Dans la base de données Mysql, nous pouvons utiliser la fonction limit pour implémenter une requête de pagination de données, mais aucune fonction similaire n'est fournie dans SQL Server. Ensuite, nous pouvons utiliser notre initiative subjective - en implémenter une nous-mêmes. L'implémentation spécifique est la suivante. :

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

Ci-dessus, nous avons défini l'expression de table commune Results_CTE, qui obtient les données de la table T_Paginate et les trie en fonction de la valeur ID de petite à grande, puis attribue des valeurs ROW_NUMBER ​​​​selon cet ordre, où @Start et @Offset sont la plage de données à interroger.

Ensuite, implémentons la méthode GetListMessages(), l'implémentation spécifique est la suivante :

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

Ci-dessus, nous avons défini la méthode GetListMessages(). Par souci de simplicité, nous avons écrit l'opération de base de données directement sur le service Web. Veuillez me pardonner. Elle obtient les données de pagination en appelant l'expression de table commune Results_CTE. create Un objet JavaScriptSerializer sérialise les données au format JSON et les renvoie au client.

Javascript
Puisque nous appelons l'API du service Web local, nous envoyons une requête de même origine pour appeler l'interface API (exemple de requête cross-origin) L'implémentation spécifique est la suivante :

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

Ci-dessus, nous avons défini la méthode getData(), qui utilise la méthode jQuery.ajax() pour envoyer une requête de même origine pour appeler l'interface GetListMessages. Lorsque les données sont chargées et affichées avec succès dans le div de résultat, la pagination. Le numéro (groupNumber) est augmenté de un.

Maintenant, nous avons implémenté la méthode getData(). Chaque fois que l'utilisateur fait glisser la barre de défilement vers le bas, la méthode getData() est appelée pour obtenir les données. Ensuite, nous devons combiner la méthode getData() avec la méthode getData(). événement de barre de défilement Binding, l'implémentation spécifique est la suivante :

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

Ci-dessus, nous avons implémenté l'événement scroll de jQuery Lorsque la barre de défilement défile vers le bas, la méthode getData() est appelée pour obtenir les données sur le serveur.

Style CSS
Ensuite, nous ajoutons des styles CSS au programme, qui sont spécifiquement définis comme suit :

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

Image 3 Chargement de plus de programmes

Ci-dessus, nous avons implémenté jQuery pour charger automatiquement plus de programmes et envoyer une requête asynchrone pour obtenir des données du serveur chaque fois que la barre de défilement atteint le bas.

Nous avons introduit le chargement asynchrone des données via jQuery via un programme de démonstration. Bien sûr, cela implique également une requête de page de données. Ici, nous utilisons une expression de table commune personnalisée Results_CTE pour obtenir des données paginées, puis via $.ajax(. ) envoie une requête de même origine pour appeler l'API du service Web ; lorsque les données sont obtenues avec succès, les données sont renvoyées au format JSON. Enfin, nous affichons les données sur la page.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.