Table des matières
Préface
Explication de la partie centrale d'Ajax asynchrone
Code de la page HTML+JS
Code PHP (ajax.php)
Maison développement back-end PHP7 Soumission asynchrone Ajax pour le développement de forums de discussion PHP7

Soumission asynchrone Ajax pour le développement de forums de discussion PHP7

Dec 18, 2020 am 09:10 AM
ajax异步提交 php7

Tutoriel PHP7Présentation de la soumission asynchrone Ajax sur le développement de forums de messages

Soumission asynchrone Ajax pour le développement de forums de discussion PHP7

Recommandé (gratuit) : Tutoriel php7,Tutoriel ajax

Préface

Ce tutoriel est la partie la plus importante de cet album. Avec les mises à jour itératives continues de la technologie front-end, la mise en œuvre de nombreuses fonctions du site Web a été transférée vers le front-end. À en juger par le classement des langages de programmation du premier trimestre 2018, JavaScript reste le langage de programmation le plus populaire. Donc si vous souhaitez apprendre js en profondeur, Ajax est indispensable.

La vérification JS a été abordée dans le cours précédent. Le code du didacticiel est modifié en fonction du développement du forum de messages PHP7 (vérification JS) de Friends. Il peut être facilement complété en ajoutant simplement la partie opération ajax asynchrone. .

Il est à noter qu'ici nous n'expliquerons pas en détail ce qu'est l'objet XMLHttpRequest, pourquoi nous devrions l'utiliser, etc. Je crois que si vous pouvez l'utiliser à nouveau, vous serez plus impressionné si vous apprenez plus à ce sujet Voici autant que possible Un enseignement moins basé sur le texte et axé sur les tests peut permettre d'obtenir des résultats d'apprentissage.

Ouvrez l'éditeur et lancez-vous !

Explication de la partie centrale d'Ajax asynchrone
// 第一步 创建 XMLHttpRequest 对象,为了更容易理解,变量就用ajax
var ajax = new XMLHttpRequest();

// 第二步 初始化一个Ajax请求,url参数是远程请求地址ajax.php
ajax.open('POST', url, true); // 这里用到post提交留言,所以用post方式提交给服务器
// ajax.open('GET', url, true); // get方式请求服务器

// 第三步 发送请求;如果该请求是异步模式(默认),该方法会立刻返回。
ajax.send(inputdata);

// 第四步 发送请求总该要知道有没收到吧,这里就需要用到Ajax的事件监听器onreadystatechange 
ajax.onreadystatechange = function(){
    // 这里判断服务器是否有数据响应,如果有则做些你要处理的逻辑,比如提示用户操作成功
}
Copier après la connexion

Si vous ne comprenez toujours pas les quatre étapes ci-dessus, vous pouvez y penser comme la première étape pour trouver un ami A pour envoyer un e-mail, et la deuxième étape pour envoyer un e-mail à ce A L'ami a écrit le contenu de la lettre et l'a encapsulé avec l'adresse et a apposé un cachet La troisième étape consistait à livrer le courrier après un certain temps (bien sûr. il y avait une réponse immédiate si la connexion Internet était disponible), la quatrième étape consistait à recevoir une réponse de l'ami A. J'étais très content. Ensuite, vous pouvez faire des choses en fonction du contenu de la réponse, comme rencontrer (en ligne) ou prendre rendez-vous...

C'est tout. Voici le code complet.

Code de la page HTML+JS
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link rel="stylesheet" href="feedback.css">
        <!-- 3.js表单验证 -->
        <script type="text/javascript">
            function checkform(){
                var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名
                var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式
                var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容
                // 如果没有输入姓名 则提示
                if(nickname == ''){
                    alert('请输入您的姓名');
                    document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框
                    return false; // 阻止冒泡 输入姓名后才能通过
                }
                // 如果没有输入联系方式 则提示
                if(tel == ''){
                    alert('请输入您的联系方式');
                    document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框
                    return false;  // 阻止冒泡 输入联系方式才能通过
                }
                // 如果没有输入留言内容 则提示
                if(content == ''){
                    alert('请输入您的联系方式');
                    document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框
                    return false;  // 阻止冒泡 输入留言内容才能通过
                }
                
                // js已经拿到了用户提交的数据,那接下来就是AJAX(页面无刷新提交数据到服务器-异步通信)
                // 异步请求 start
                var ajax, url, inputdata;
                // 创建 XMLHttpRequest 对象
                if(window.XMLHttpRequest){
                    ajax = new XMLHttpRequest();
                }else{
                    // 兼容Internet Explorer(IE5 和 IE6)使用 ActiveX 对象
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                url = 'ajax.php';
                ajax.open('POST', url, true);
                ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");  // 用POST的时候一定要有这句
                inputdata = 'nickname='+nickname+'&tel='+tel+'&content='+content;
                ajax.send(inputdata);
                // 接收服务器返回的数据
                ajax.onreadystatechange = function(){
                    // 获取服务器响应状态码
                    if(ajax.readyState == 4 && ajax.status==200){
                        // 获取服务器返回的响应返回的数据
                        var retdata = ajax.responseText;
                        if(retdata == 1){
                            alert('留言信息已提交成功!感谢您的宝贵意见。');
                        }
                    }
                }
                // 异步请求 end
                return false; // 这里是为了方式submit点击后表单自动提交
                // document.feedback_form.submit(); // 提交用户数据到后端action中的地址
            }
        </script>
    </head>
    <body>
        <!-- 工作区,呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p class="container_box">
            <p class="up">
                <h3 class="title">留言板</h3>
                <h5 class="subtitle">FEEDBACK</h5>
            </p>
            <p class="down">
                <form name="feedback_form" action="/#" method="post" onsubmit="return false;">
                    <p class="input">
                        <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> 
                        <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" />
                    </p>
                    <textarea class="content" cols="30" rows="10" name="nr"></textarea>
                    <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
                </form>
            </p>
        </p>
    </body>
</html>
Copier après la connexion
Code PHP (ajax.php)
<?php
include &#39;config.php&#39;;

// POST接收用户提交的数据
$nickname = !empty($_POST[&#39;nickname&#39;])? addslashes(strip_tags($_POST[&#39;nickname&#39;])):&#39;&#39;; // 留言人名称
$tel = !empty($_POST[&#39;tel&#39;])?addslashes(strip_tags($_POST[&#39;tel&#39;])):&#39;&#39;; // 留言人的联系方式
$content = !empty($_POST[&#39;content&#39;])?addslashes(strip_tags($_POST[&#39;content&#39;])):&#39;&#39;; // 留言内容
$time = time(); // 当前系统时间,即用户留言时间

// 插入mysql语句
$sql = "INSERT INTO feedback (name, contact, content, addtime) VALUES (&#39;{$nickname}&#39;, &#39;{$tel}&#39;, &#39;{$content}&#39;, &#39;{$time}&#39;)";

// 立即执行mysql语句
$result = mysqli_query($mysqli, $sql); // 返回一个资源标识符,通常是数字
$insert_id = mysqli_insert_id($mysqli); // 返回数据表的自增长ID,比如新用户注册返回用户ID
// echo $insert_id; // 当你在调试的时候,你会发现echo是很好的帮手。
if($insert_id > 0){
    // 如果入库成功,这里可以处理其他想要的逻辑
    echo 1;
    exit;  // 退出程序,使其不再往下执行代码
}
// 这是错误的时候返回0
echo 0;
exit;
Copier après la connexion

N'oubliez pas de vous entraîner ! Bienvenue sur Doodle dans la zone de commentaires ci-dessous ! ~

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment installer l'extension mongo dans php7.0 Comment installer l'extension mongo dans php7.0 Nov 21, 2022 am 10:25 AM

Comment installer l'extension mongo dans php7.0 : 1. Créez le groupe d'utilisateurs et l'utilisateur mongodb ; 2. Téléchargez le package de code source mongodb et placez le package de code source dans le répertoire "/usr/local/src/" ; Entrez le répertoire « src/ » ; 4. Décompressez le package de code source ; 5. Créez le répertoire de fichiers mongodb ; 6. Copiez les fichiers dans le répertoire « mongodb/ » 7. Créez le fichier de configuration mongodb et modifiez la configuration.

Comment résoudre le problème lorsque php7 détecte que le port TCP ne fonctionne pas Comment résoudre le problème lorsque php7 détecte que le port TCP ne fonctionne pas Mar 22, 2023 am 09:30 AM

En php5, nous pouvons utiliser la fonction fsockopen() pour détecter le port TCP. Cette fonction peut être utilisée pour ouvrir une connexion réseau et effectuer certaines communications réseau. Mais en php7, la fonction fsockopen() peut rencontrer certains problèmes, comme ne pas pouvoir ouvrir le port, ne pas pouvoir se connecter au serveur, etc. Afin de résoudre ce problème, nous pouvons utiliser la fonction socket_create() et la fonction socket_connect() pour détecter le port TCP.

Que dois-je faire si le plug-in est installé dans php7.0 mais qu'il indique toujours qu'il n'est pas installé ? Que dois-je faire si le plug-in est installé dans php7.0 mais qu'il indique toujours qu'il n'est pas installé ? Apr 02, 2024 pm 07:39 PM

Pour résoudre le problème du plugin n'affichant pas installé dans PHP 7.0 : Vérifiez la configuration du plugin et activez le plugin. Redémarrez PHP pour appliquer les modifications de configuration. Vérifiez les autorisations du fichier du plugin pour vous assurer qu'elles sont correctes. Installez les dépendances manquantes pour garantir le bon fonctionnement du plugin. Si toutes les autres étapes échouent, reconstruisez PHP. D'autres causes possibles incluent des versions de plugin incompatibles, le chargement d'une mauvaise version ou des problèmes de configuration PHP.

Guide FAQ de l'environnement serveur PHP : résoudre rapidement les problèmes courants Guide FAQ de l'environnement serveur PHP : résoudre rapidement les problèmes courants Apr 09, 2024 pm 01:33 PM

Les solutions courantes pour les environnements de serveur PHP consistent à s'assurer que la version correcte de PHP est installée et que les fichiers pertinents ont été copiés dans le répertoire du module. Désactivez SELinux temporairement ou définitivement. Vérifiez et configurez PHP.ini pour vous assurer que les extensions nécessaires ont été ajoutées et configurées correctement. Démarrez ou redémarrez le service PHP-FPM. Vérifiez les paramètres DNS pour les problèmes de résolution.

Comment installer et déployer php7.0 Comment installer et déployer php7.0 Nov 30, 2022 am 09:56 AM

Comment installer et déployer php7.0 : 1. Accédez au site officiel de PHP pour télécharger la version d'installation correspondant au système local ; 2. Extrayez le fichier zip téléchargé dans le répertoire spécifié 3. Ouvrez la fenêtre de ligne de commande et accédez à ; le répertoire "E:\php7" Exécutez simplement la commande "php -v".

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système? Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système? Mar 31, 2025 pm 11:54 PM

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système. Chaque fois que le système redémarre, nous devons exécuter la commande suivante pour modifier les autorisations d'UnixSocket: sudo ...

Pourquoi une erreur se produit-elle lors de l'installation d'une extension à l'aide de PECL dans un environnement Docker? Comment le résoudre? Pourquoi une erreur se produit-elle lors de l'installation d'une extension à l'aide de PECL dans un environnement Docker? Comment le résoudre? Apr 01, 2025 pm 03:06 PM

Causes et solutions pour les erreurs Lors de l'utilisation de PECL pour installer des extensions dans un environnement Docker Lorsque nous utilisons un environnement Docker, nous rencontrons souvent des maux de tête ...

Lequel est le meilleur, php8 ou php7 ? Lequel est le meilleur, php8 ou php7 ? Nov 16, 2023 pm 03:09 PM

Par rapport à PHP7, PHP8 présente certains avantages et améliorations en termes de performances, de nouvelles fonctionnalités et améliorations de la syntaxe, du système de types, de la gestion des erreurs et des extensions. Cependant, le choix de la version à utiliser dépend de vos besoins spécifiques et des circonstances du projet. Introduction détaillée : 1. Amélioration des performances, PHP8 introduit le compilateur Just-in-Time (JIT), qui peut améliorer la vitesse d'exécution du code ; 2. Nouvelles fonctionnalités et améliorations de la syntaxe, PHP8 prend en charge la déclaration des paramètres nommés et des paramètres facultatifs, création de fonctions L'appel est plus flexible ; des classes anonymes, des déclarations de propriétés de type, etc. sont introduites.

See all articles