php+jQuery+Ajax implémente la fonction d'actualisation asynchrone de la page-tutoriel php-php.cn

php+jQuery+Ajax implémente la fonction d'actualisation asynchrone de la page

墨辰丷

Libérer： 2023-03-29 09:08:01

original

1123 Les gens l'ont consulté

Cet article présente principalement php+jQuery+Ajax pour implémenter l'actualisation de page asynchrone, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Les détails sont les suivants :

Le code dans. JQueryAjax.html est le suivant (en utilisant le $.post plus simple)

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

Copier après la connexion

ajax.php

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


echo "操作完毕";
?>

Copier après la connexion

Au format non-json, l'arrière-plan ne peut renvoyer que des chaînes. Si vous souhaitez renvoyer un tableau en arrière-plan, vous pouvez utiliser le format json

Par exemple, utiliser JQueryAjax Le code dans est modifié comme suit :

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

Copier après la connexion

ajax.php

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

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

Copier après la connexion

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Explication détaillée de l'utilisation de l'héritage orienté objet PHP

phpImage fonction de traitement imagecopyresampled Utilisation

php Exemples détaillés de la différence entre die() et exit()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!