Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Ajax- und PHP-Dateninteraktion

Detaillierte Erläuterung der Ajax- und PHP-Dateninteraktion

小云云Original: 2018-05-12 09:06:119121Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die Implementierungsmethode für die Interaktion mit PHP-Daten und die teilweise Aktualisierung der Seite vor. Der Artikel stellt sie detailliert anhand von Beispielcode vor, der hoffentlich für jeden einen gewissen Referenz- und Lernwert hat allen helfen.

Was ist Ajax?

Inländische Übersetzung ist oft „Ajax“ und die gleiche Aussprache der Ajax-Fußballmannschaft ist eine Technologie, die zum Erstellen schneller dynamischer Webseiten verwendet wird. sondern eine neue Art, bestehende Standards zu nutzen. 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 relevanten Inhalt der Seite teilweise zu aktualisieren. 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){
  ...//返回失败的回调函数
 }
});

1.2 Empfangsmethode auf PHP-Seite

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

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>

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

<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>

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

3. Der endgültige Effekt ist wie folgt

Verwandte Empfehlungen:

Ajax- und PHP-Datenaustausch unter dem JQuery-Framework

Detaillierte Erklärung des Ajax und PHP-Antwortprozess in thinkphp_PHP

Ajax und PHP

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ajax- und PHP-Dateninteraktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung der Verwendung von Ajax zum doppelten Kapseln von JQuery-InstanzenNächster Artikel：Ausführliche Erklärung der Verwendung von Ajax zum doppelten Kapseln von JQuery-Instanzen

In Verbindung stehende Artikel

Mehr sehen