Explication détaillée de l'interaction des données Ajax et PHP-js tutoriel-php.cn

Explication détaillée de l'interaction des données Ajax et PHP

小云云

Libérer： 2018-05-12 09:06:11

original

9142 Les gens l'ont consulté

Cet article vous présente principalement la méthode d'implémentation d'utilisation d'Ajax pour interagir avec les données PHP et actualiser partiellement la page. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur de référence et d'apprentissage pour tout le monde. aider tout le monde.

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. En échangeant une petite quantité de données avec le serveur en arrière-plan, AJAX permet aux pages Web d'être mises à jour de manière asynchrone, 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 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 à 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 Code PHP 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