Wie Ajax+php Dateninteraktion und teilweise Seitenaktualisierung durchführt-js-Tutorial-php.cn

Wie Ajax+php Dateninteraktion und teilweise Seitenaktualisierung durchführt

php中世界最好的语言

Freigeben： 2018-03-31 11:49:11

Original

1674 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Ajax+php Dateninteraktion und teilweise Seitenaktualisierung durchführt. Was sind die Vorsichtsmaßnahmen für Ajax+php, um Dateninteraktion und teilweise Seitenaktualisierung durchzuführen? . Steh auf und schau es dir an.

Was ist Ajax?

Die inländische Übersetzung ist oft „Ajax“ und das Homonym der Ajax-Fußballmannschaft. AJAX ist eine Technologie, die zum Erstellen schneller dynamischer Webseiten verwendet wird neue Art der Nutzung bestehender Standards. Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund ermöglicht AJAX die asynchrone Aktualisierung von Webseiten, sodass Teile der Webseite aktualisiert werden können, ohne dass die gesamte Webseite neu geladen werden muss.

XMLHttpRequest ist die Basis von AJAX und dient dem Datenaustausch mit dem Server. Alle modernen Browser unterstützen das XMLHttpRequest-Objekt (IE5 und IE6 verwenden ActiveXObject)

Der folgende Artikel stellt hauptsächlich die Verwendung von Ajax vor, um mit PHP-Daten zu interagieren und den Seiteninhalt teilweise zu aktualisieren Im Folgenden gibt es viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung:

1. Syntax-Einführung

1.1 Grundlegende Ajax-Syntax

$.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){
  ...//返回失败的回调函数
 }
});

Nach dem Login kopieren

1.2 Empfangsmethode auf PHP-Seite

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

Nach dem Login kopieren

2. Detaillierte Erläuterung der Beispiele

2.1 HTML-Code 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>

Nach dem Login kopieren

2.2 Fügen Sie den folgenden js-Code zu demo.html hinzu

<script>
 $(function(){
 $('#sub').click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式
  success: function(msg){
   $('#text').empty(); //清空Text里面的所有内容
   var data='';
   if(msg!=''){
   data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
   }
   $('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },
  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>

Nach dem Login kopieren

2.3 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数据
?>

Nach dem Login kopieren

3. Der endgültige Effekt ist wie folgt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie natives Ajax und gekapseltes Ajax (mit Code)

Bei der Verwendung werden verstümmelte Zeichen angezeigt Ajax So lösen Sie

Das obige ist der detaillierte Inhalt vonWie Ajax+php Dateninteraktion und teilweise Seitenaktualisierung durchführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!