Implémenter une explication détaillée de l'interaction des données Ajax+php et actualiser partiellement la page-tutoriel php-php.cn

Implémenter une explication détaillée de l'interaction des données Ajax+php et actualiser partiellement la page

coldplay.xixi

Libérer： 2023-04-09 08:58:01

avant

2953 Les gens l'ont consulté

Qu'est-ce que l'Ajax ?

La traduction nationale est souvent "Ajax" et la même prononciation de l'équipe de football Ajax est une technologie utilisée pour créer des pages Web dynamiques rapides. mais une nouvelle façon d'utiliser les normes existantes. AJAX permet aux pages Web d'être mises à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan, de sorte que certaines parties de la page Web puissent être mises à jour sans recharger la page Web entière.

XMLHttpRequest est la base d'AJAX et est utilisé pour échanger des données avec le serveur. Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest (IE5 et IE6 utilisent ActiveXObject)

L'article suivant présente principalement l'utilisation d'ajax pour interagir avec les données php et actualiser partiellement le contenu pertinent de la page. , jetons un coup d'œil à l'introduction détaillée :

1.1 Introduction à la syntaxe

1.1 Syntaxe ajax de base

$.ajax({
 type: "post",        //数据提交方式（post/get）
 url: "http://xxx/test/demo.php",   //提交到的url
 data: {username:username,password:password},//提交的数据
 dataType: "json",       //返回的数据类型格式


 success: function(msg){
  ...//返回成功的回调函数
 },


 error:function(msg){
  ...//返回失败的回调函数
 }
});

Copier après la connexion

1.2 Méthode de réception côté php

<!--?php
 $username=$_POST[&#39;username&#39;]; //接收以post方式提交来的username数据
 $password=$_POST[&#39;password&#39;];
?>

Copier après la connexion

2 Explication détaillée des exemples

2.1 code côté html demo.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajaxTest</title>
</head>
<body>
 <input type="text" id="username">
 <input type="text" id="password">
 <button id="sub">查询</button>
 <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</html>

Copier après la connexion

2.2 Ajoutez le code js suivant dans demo.html

<script>
 $(function(){
 $(&#39;#sub&#39;).click(function(){
  var username=$(&#39;#username&#39;).val();
  var password=$(&#39;#password&#39;).val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $(&#39;#text&#39;).empty(); //清空Text里面的所有内容
   var data=&#39;&#39;;
   if(msg!=&#39;&#39;){
   data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
   }
   $(&#39;#text&#39;).html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },

  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>

Copier après la connexion

2.3 côté php code demo.php

<!--?php
 header(&#39;Content-type:text/json;charset=utf-8&#39;);
 $username=$_POST[&#39;username&#39;];
 $password=$_POST[&#39;password&#39;];


 $data=&#39;{username:"&#39; . $username . &#39;",password:"&#39; . $password .&#39;"}&#39;;//组合成json格式数据
 echo json_encode($data);//输出json数据
?>

Copier après la connexion

3 L'effet final est le suivant