PHP et Ajax : créez des applications Ajax accessibles-tutoriel php-php.cn

PHP et Ajax : créez des applications Ajax accessibles

王林

Libérer： 2024-06-04 13:16:56

original

968 Les gens l'ont consulté

PHP et Ajax peuvent être facilement intégrés pour créer des applications Web interactives. Les étapes spécifiques incluent : Création d'un fichier PHP qui gère les demandes des utilisateurs. Créez des pages HTML qui utilisent AJAX pour communiquer avec les fichiers PHP. Gérez les entrées de l'utilisateur dans la page HTML et envoyez-les au fichier PHP via AJAX. Traitez les entrées de l'utilisateur dans un fichier PHP et renvoyez une réponse. Afficher la réponse du fichier PHP dans une page HTML.

PHP 与 Ajax：创建可访问的 Ajax 应用程序

PHP avec Ajax : Création d'applications Ajax accessibles

Introduction

Ajax (JavaScript asynchrone et XML) est une technologie permettant de créer des applications Web dynamiques et interactives. Il permet aux applications de communiquer avec le serveur sans recharger la page entière. PHP est un langage côté serveur populaire pour le développement Web qui peut être intégré à Ajax pour créer des applications interactives et efficaces.

Étapes

1. Créez un fichier PHP

Tout d'abord, créez un nouveau fichier PHP nommé ajax.php : ajax.php 的新 PHP 文件：

<?php
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    // 处理用户输入的代码
}
?>

Copier après la connexion

2. 创建 HTML 页面

然后，创建一个名为 index.html 的新 HTML 页面：

<html>
<head>
    <title>Ajax App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="ajax-form">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name"><br>
        <input type="submit" name="submit" value="Submit">
    </form>

    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#ajax-form').submit(function(e) {
                e.preventDefault();

                var name = $('#name').val();

                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: {name: name},
                    success: function(response) {
                        $('#result').html(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

Copier après la connexion

实战案例

用户提交表单

当用户在 index.html 页面上提交表单时，以下事件将发生：

阻止默认表单提交行为。
使用 jQuery 库发送 Ajax 请求到 ajax.php 文件。
在请求中包含用户输入的姓名。

服务器端处理

在 ajax.php 文件中，我们检查 $_POST['submit'] 是否已设置。如果已设置，我们从 $_POST 数组中获取用户输入的姓名。然后，我们可以执行任何必要的处理，例如将姓名保存到数据库或发送电子邮件。

显示结果

在 Ajax 请求成功后，服务器端响应将显示在 index.html 页面的 #resultrrreee

2 Créez une page HTML

Ensuite, créez. une nouvelle page HTML nommée index.html :

rrreee

🎜Cas pratique🎜🎜🎜🎜L'utilisateur soumet le formulaire🎜🎜🎜Lorsque l'utilisateur est sur la page index.html Lorsqu'un formulaire est soumis, les événements suivants se produisent : 🎜

Empêche le comportement de soumission de formulaire par défaut.
Utilisez la bibliothèque jQuery pour envoyer des requêtes Ajax au fichier ajax.php.
Inclure le nom saisi par l'utilisateur dans la requête.

🎜🎜Traitement côté serveur🎜🎜🎜Dans le fichier ajax.php, nous vérifions si $_POST['submit'] est défini . S'il est défini, nous obtenons le nom saisi par l'utilisateur à partir du tableau $_POST. Nous pouvons alors effectuer tous les traitements nécessaires, comme l'enregistrement du nom dans une base de données ou l'envoi d'un email. 🎜🎜🎜Afficher les résultats🎜🎜🎜Après une requête Ajax réussie, la réponse côté serveur sera affichée dans le div #result de la page index.html. La réponse peut être du texte, du HTML ou tout autre type de données. 🎜🎜🎜Conclusion🎜🎜🎜En intégrant PHP et Ajax, nous pouvons créer des applications Web accessibles et interactives qui offrent une expérience utilisateur améliorée et réduisent la charge du serveur. Les exemples de code de ce didacticiel montrent comment implémenter les fonctionnalités Ajax de base et peuvent être étendus et personnalisés pour répondre à des besoins spécifiques dans une application réelle. 🎜

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!