recherche

Maison >interface Web >Questions et réponses frontales >Comment lire la base de données via JQuery

Comment lire la base de données via JQuery

PHPz
PHPzoriginal
2023-04-17 15:15:441087parcourir

JQuery est une bibliothèque JavaScript connue pour être un moyen rapide, concis et puissant d'écrire du JavaScript. JQuery fournit un grand nombre de fonctions et de fonctionnalités intégrées, qui peuvent réduire considérablement la quantité de code JavaScript, et fournit des opérations DOM puissantes et des requêtes AJAX (JavaScript asynchrone et XML) concises. C'est un outil important qui ne peut être ignoré dans le Web. développement front-end.

Dans une application Web, le front-end effectue les opérations nécessaires en comprenant les données d'arrière-plan. JQuery peut accéder à l'arrière-plan via des requêtes AJAX pour obtenir les données requises. Voici une introduction à la façon de lire la base de données via JQuery.

  1. Configuration de la bibliothèque JQuery

L'introduction de la bibliothèque JQuery dans la page HTML peut être introduite à l'aide de CDN (Content Delivery Network) ou téléchargée sur le stockage local.

Ajoutez le code suivant à la page HTML pour présenter la bibliothèque JQuery : 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  1. Créez une interface de données en arrière-plan

Créez une interface en arrière-plan pour obtenir des données via des requêtes AJAX, et les données sont renvoyées au format JSON. En prenant le langage PHP comme exemple, les données de la base de données sont obtenues dans le script PHP et formatées en données JSON, puis renvoyées à la requête via une réponse HTTP. 

<?php
    // 连接数据库操作
    $conn = mysqli_connect("localhost", "my_user", "my_password", "my_db");
    if (!$conn) {
        die("连接失败: " . mysqli_connect_error());
    }
    // 查询数据库操作
    $query = "SELECT * FROM table_name";
    $result = mysqli_query($conn, $query);
    // 数据库数据格式化为 JSON 数据
    $rows = array();
    while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
    }
    echo json_encode($rows);
    // 关闭数据库连接
    mysqli_close($conn);
?>
  1. Obtenir des données de base de données via une requête AJAX

Dans la page HTML, créez une zone pour afficher les données (comme un élément div), puis utilisez AJAX pour demander à l'interface de données d'arrière-plan d'obtenir les données. Dans la requête, JQuery ajoutera automatiquement les informations d'en-tête et obtiendra les données de manière asynchrone. 

<!doctype html>
 <html>
 <head>
     <title>读取数据库</title>
 </head>
 <body>
     <div id="result"></div>
     <script type="text/javascript">
         $(document).ready(function() {
             $.ajax({
                 url: 'backend.php', // 数据库接口地址
                 type: 'GET',        // HTTP请求方式
                 dataType: 'json',   // 返回数据类型
                 success: function(data) { // 成功回调函数
                     $.each(data, function(index, element) {
                         $('#result').append('<p>' + element.name + '</p>');
                     });
                 },
                 error: function(xhr, textStatus, errorThrown) { // 失败回调函数
                     console.log(xhr.status);
                 }
            });
        });
     </script>
 </body>
 </html>

Comme le montre le code ci-dessus, nous avons défini un élément div avec l'ID du résultat pour afficher les données obtenues. Utilisez la page backend.php accessible par AJAX pour demander des données au serveur. Si la demande réussit, JQuery analysera automatiquement les données JSON renvoyées et exécutera la fonction de rappel pour afficher les données sur la page. Si la demande échoue, la fonction de rappel d'échec est exécutée.

En bref, grâce aux étapes simples ci-dessus, vous pouvez utiliser la bibliothèque JQuery pour lire la base de données dans le développement Web, obtenant ainsi des applications Web plus puissantes et flexibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript json jquery ajax html xml 回调函数 接口 dom 异步 数据库 http
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir l'effet de rotation des photos Web grâce à la technologie frontaleArticle suivant：Comment obtenir l'effet de rotation des photos Web grâce à la technologie frontale

Articles Liés

Voir plus