Créer des applications Ajax en utilisant PHP et jQuery-tutoriel php-php.cn

Créer des applications Ajax en utilisant PHP et jQuery

WBOY

Libérer： 2023-05-11 15:24:01

original

660 Les gens l'ont consulté

Avec le développement continu des applications Web, Ajax est devenu un outil puissant capable de communiquer avec le serveur sans actualisation de page. En utilisant Ajax, vous pouvez améliorer les performances et la convivialité des applications Web et améliorer l'expérience utilisateur.

Cet article explique comment créer des applications Ajax à l'aide de PHP et jQuery. Nous allons créer une page de requête simple où les utilisateurs pourront saisir des mots-clés et les envoyer au serveur à l'aide de la technologie Ajax. Le serveur effectuera une recherche dans la base de données et renverra des résultats pertinents, qui seront affichés dynamiquement sur la page Web sans rechargement.

Avant de commencer, assurez-vous d'avoir installé PHP et jQuery. Nous utiliserons PHP pour gérer les requêtes et jQuery pour envoyer les requêtes Ajax et traiter les résultats renvoyés.

Étape 1 : Créer un fichier HTML

Tout d'abord, nous devons créer un fichier HTML comme page de requête. Vous trouverez ci-dessous un modèle de fichier HTML de base, qui comprend une zone de texte et un bouton.

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Search</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    //Ajax代码将放在这里
  </script>
</head>
<body>
  <h1>Ajax Search</h1>
  <input type="text" id="keyword" name="keyword" placeholder="Enter Keyword">
  <button id="search">Search</button>

  <div id="results">
    <!-- 结果将在这里动态显示 -->
  </div>

</body>
</html>

Copier après la connexion

Étape 2 : Créer un fichier PHP

Ensuite, nous devons créer un fichier PHP pour traiter les requêtes de requête. Voici un exemple de code qui gère les requêtes de requête :

<?php
//连接到数据库
$db = mysqli_connect('localhost', 'username', 'password', 'database_name');

//检查连接是否成功
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}

//从查询字符串中获取关键字
$keyword = $_GET['keyword'];

//构建查询
$sql = "SELECT * FROM products WHERE name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);

//检查查询是否成功
if (!$result) {
  echo 'Could not run query: ' . mysqli_error($db);
  exit();
}

//将结果转换为JSON格式并输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}
echo json_encode($rows);

//关闭连接
mysqli_close($db);
?>

Copier après la connexion

Ce code recherchera les produits contenant des mots-clés et convertira les résultats au format JSON. Ensuite, nous utiliserons jQuery pour envoyer des requêtes Ajax et gérer les résultats renvoyés.

Troisième étape : écrire le code Ajax

Maintenant, nous pouvons combiner les codes ci-dessus pour créer une application Ajax complète. Voici notre code jQuery :

$(document).ready(function() {
    $('#search').click(function() {
        var keyword = $('#keyword').val();
    
        // 发送Ajax请求
        $.ajax({
            url: 'search.php',
            dataType: 'json',
            data: {
                keyword: keyword
            },
            success: function(data) {
                // 处理返回的结果
                var results = '';
                $.each(data, function(index, value) {
                    results += '<div>';
                    results += '<h3>' + value['name'] + '</h3>';
                    results += '<p>' + value['description'] + '</p>';
                    results += '<p>Price: ' + value['price'] + '</p>';
                    results += '</div>';
                });
    
                $('#results').html(results);
            },
            error: function(jqxhr, textStatus, error) {
                // 处理错误
                var err = textStatus + ", " + error;
                console.log( "Request Failed: " + err );
            }
        });
    });
});

Copier après la connexion

Ce code inclut un événement de clic qui obtiendra le mot-clé lorsque l'utilisateur clique sur le bouton de recherche et envoie une requête en utilisant Ajax. La requête sera envoyée au fichier search.php, qui interrogera la base de données et renverra les résultats au format JSON. Une fois le résultat reçu avec succès, nous utiliserons jQuery pour créer dynamiquement le HTML du résultat et l'afficher sur la page.

Nous utilisons régulièrement la méthode $.ajax de jQuery pour gérer les requêtes asynchrones, ce qui vous donne beaucoup de contrôle avancé et vous permet de gérer tous les types de données de manière très simple.

Ce à quoi vous devez faire attention ici, ce sont les fonctions de rappel de réussite et d'erreur d'ajax dans jQuery. Le succès représente un rappel réussi et l'erreur représente un rappel d'exception. Ainsi, lorsque le serveur renvoie les données avec succès, les données seront transmises à la fonction de rappel de réussite, puis notre code de logique métier traitera les données renvoyées. Lorsqu'une exception se produit dans la requête, par exemple, le serveur est forcé et renvoie un code d'état 403, notre code recevra l'exception de la fonction de rappel d'erreur et effectuera le traitement associé, tel que l'affichage des informations d'exception à l'utilisateur.

Quatrième étape : tester l'application

Maintenant, nous pouvons tester notre application. Ouvrez le fichier HTML, entrez un mot-clé et cliquez sur le bouton de recherche. Vous devriez voir des résultats pertinents apparaître dynamiquement sur la page sans rechargement.

Si vous rencontrez des problèmes, vous pouvez consulter le journal de la console pour détecter d'éventuels messages d'erreur ou consulter le code PHP pour vous assurer qu'il fonctionne correctement.

Conclusion

Grâce à PHP et jQuery, nous pouvons facilement créer de puissantes applications Ajax. Ajax rend les applications Web plus rapides et plus réactives, améliorant ainsi l'expérience utilisateur. Vous pouvez désormais créer vos propres applications Ajax en utilisant PHP et jQuery et améliorer les performances et la convivialité de vos applications Web.

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!