Heim > Artikel > Backend-Entwicklung > php+jQuery+Ajax implementiert die asynchrone Seitenaktualisierungsfunktion

php+jQuery+Ajax implementiert die asynchrone Seitenaktualisierungsfunktion

墨辰丷Original: 2018-06-01 15:51:101093Durchsuche

In diesem Artikel wird hauptsächlich PHP + jQuery + Ajax zur Implementierung der asynchronen Seitenaktualisierung vorgestellt, die einen bestimmten Referenzwert hat.

Die Details lauten wie folgt:

Der Code in JQueryAjax.html lautet wie folgt (unter Verwendung des einfacheren $.post)

<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
 用户名:<input type="text" id="username" name="username" /><br>
 密码:<input type="password" id="password" name="password" /><br>
 <button type="button" class="butn">ajax提交</button><br>
 <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
 $(".butn").click(function(){
  var username = $("#username").val();
  var password = $("#password").val();
  $.post(&#39;ajax.php&#39;,{name:username,pwd:password},function(data) {
   alert(data);
   $(".con").html(data);
  })
 })
})
</script>
</body>
</html>

ajax.php

<?php 
echo &#39;用户名:&#39;,$_POST[&#39;name&#39;],&#39;,密码：&#39;,$_POST[&#39;pwd&#39;]."<br>";
//这里可以进行一些操作，比如数据库交互


echo "操作完毕";
?>

Im Nicht-JSON-Format kann der Hintergrund nur Zeichenfolgen zurückgeben. Wenn Sie ein Array im Hintergrund zurückgeben möchten, können Sie das JSON-Format verwenden.

Ändern Sie beispielsweise den Code in JQueryAjax In der folgenden Form:

<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
 用户名:<input type="text" id="username" name="username" /><br>
 密码:<input type="password" id="password" name="password" /><br>
 <button type="button" class="butn">ajax提交</button><br>
 <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
 $(".butn").click(function(){
  var username = $("#username").val();
  var password = $("#password").val();
  $.ajax({
    url: "ajax.php", 
    type: "POST",
    data:{name:username,pwd:password},
    dataType: "json",
    error: function(){ 
     alert(&#39;Error loading XML document&#39;); 
    }, 
    success: function(data,status){//如果调用php成功 
    alert(status);
    alert(data);
    $(&#39;.con&#39;).html("用户名:"+data[0]+"密码:"+data[1]);
    }
  });
 })
})
</script>
</body>
</html>

ajax.php

<?php 
$name = $_POST[&#39;name&#39;];
$pwd = $_POST[&#39;pwd&#39;];
$array = array("$name","$pwd");
//这里进行一个些操作，比如数据库交互

echo json_encode($array);//json_encode方式是必须的
?>

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung der objektorientierten PHP-Vererbung

phpBild Verarbeitungsfunktion imagecopyresampled Verwendung

php Detaillierte Beispiele für den Unterschied zwischen die() und exit()

Das obige ist der detaillierte Inhalt vonphp+jQuery+Ajax implementiert die asynchrone Seitenaktualisierungsfunktion. 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：So implementieren Sie mit PHP das regelmäßige Crawlen von URLs in SeitenNächster Artikel：So implementieren Sie mit PHP das regelmäßige Crawlen von URLs in Seiten

In Verbindung stehende Artikel

Mehr sehen