Home > Article > Backend Development > php+jQuery+Ajax implements page asynchronous refresh function

php+jQuery+Ajax implements page asynchronous refresh function

墨辰丷Original: 2018-06-01 15:51:101138browse

This article mainly introduces php jQuery Ajax to implement asynchronous page refresh, which has certain reference value. Interested friends can refer to it

The details are as follows:

## The code in #JQueryAjax.html is as follows (using the simpler $.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 "操作完毕";
?>

In non-json format, the background can only return strings. If you want to return an array in the background, you can use json format

For example, modify the code in JQueryAjax as follows Format:

<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方式是必须的
?>

Summary : The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

Detailed explanation of object-oriented inheritance usage in PHP

phpImage processing function imagecopyresampled Usage

##php Detailed examples of the difference between die() and exit()

The above is the detailed content of php+jQuery+Ajax implements page asynchronous refresh function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use PHP to implement regular crawling of URLs in pagesNext article：How to use PHP to implement regular crawling of URLs in pages

See more

php+jQuery+Ajax implements page asynchronous refresh function

Related articles