La page PHP n'actualise pas et ne met pas à jour les données

la page php ne rafraîchit pas et ne met pas à jour les données

la page php ne rafraîchit pas et ne met pas à jour les données est très simple à implémenter, nous pouvons utiliser la technologie Front-end ajax.

Fonction Ajax : Le but de la technologie ajax est de permettre à javascript d'envoyer des requêtes http, de communiquer avec l'arrière-plan et d'obtenir des données et des informations. Réalisez la séparation front-end et back-end. Le principe de la technologie ajax est d'instancier l'objet xmlhttp et d'utiliser cet objet pour communiquer avec le background. Le processus de communication ajax n'affectera pas l'exécution ultérieure de javascript, réalisant ainsi une implémentation asynchrone.

Le principal problème qu'ajax résout dans js est de transmettre certaines données au serveur sans actualiser la page actuelle, et de récupérer certaines données du serveur vers le client.

1. Stratégie en cinq étapes en html :

1. Créez l'objet principal AJAX

ar xhr=new XMLHttpRequest();

2. La fonction est déclenchée lorsque l'état préparé de l'objet xhr change.

xhr.addEventListener("load",loadHandler);

3. Établir une connexion

xhr.open("GET","http://localhost/index.php?user=zhangsan");

Problèmes de paramètres lors de l'établissement d'une connexion, syntaxe :

xhr.open("get", url, true);

Remarque : dans la méthode open(),

Un paramètre fait référence à la méthode d'envoi de la requête, et la valeur est get ou post.

Le deuxième paramètre fait référence au chemin de l'url demandé qui est le chemin du fichier php que vous avez écrit ? Ce qui suit constitue les informations pertinentes que la personne transportée doit obtenir.

Le troisième paramètre indique si la requête est asynchrone ou synchrone. Si vous écrivez vrai, cela signifie asynchrone (vrai par défaut), et si vous écrivez faux, cela signifie synchrone.

4. Initier une requête au serveur

xhr.send();

Syntaxe :

xhr.send();

Remarque : Si la requête est envoyée en mode get, il n'est pas nécessaire d'écrire de paramètres dans la commande send()

Les données transmises peuvent être écrites dans l'url, et le serveur utilise $_GET["parameter name"] pour les recevoir. ​

Si la demande est envoyée en mode post, l'en-tête de la demande doit être défini pour transmettre correctement les données à la page back-end. Nous utilisons ici la méthode get, il n'est donc pas nécessaire d'écrire de paramètres.

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
xhr.send(“数据名1=数据值&数据名2=数据值”);

Le serveur utilise $_POST["parameter name"] pour recevoir.

5. Déclarez la fonction de préchargement ; recevez la réponse

function loadHandler(){
   // 获取并使用服务器的响应
    console.log(xhr.response);
 
}

2. Dans le fichier php

Trois étapes :

header("content-type:text/html;charset=utf-8");

Définir le codage des caractères

header("Access-Control-Allow-Origin:*");

Définir Access-Control-Allow-Origin pour obtenir un accès inter-domaines (car différents noms de domaine ne sont pas autorisés à communiquer entre eux par défaut)

echo $_GET["user"]."今天心情很好";

Que faire donnez à la réception les données

4. Implémentez l'accès :

Placez le fichier php écrit dans le dossier www de phpStydy, comme indiqué ci-dessous :

1. du répertoire phpStyle

2. Ouvrez et recherchez le dossier www

3. Copiez le fichier PHP dans lequel vous avez écrit. www Allez dans le dossier, comme le fichier index.php que je viens d'écrire

4. Implémentez maintenant un accès ajax simple

Maintenant, exécutez votre code HTML ; code :

À ce stade, la page ne sera pas actualisée et vous pourrez accéder aux données PHP

Pour plus de connaissances liées à PHP, veuillez visiter Site Web PHP chinois !

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!