How Ajax+php performs data interaction and partial page refresh-JS Tutorial-php.cn

How Ajax+php performs data interaction and partial page refresh

php中世界最好的语言

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

Original

1677 people have browsed it

This time I will show you how Ajax+php performs data interaction and partial page refresh. What are the precautions for Ajax+php to perform data interaction and partial page refresh? The following is a practical case. Get up and take a look.

What is Ajax?

The domestic translation is often "Ajax" and the homonym of Ajax football team. AJAX is a technology used to create fast dynamic web pages. It is not a new language, but is a new way of using existing standards. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background, so that parts of the web page can be updated without reloading the entire web page.

XMLHttpRequest is the basis of AJAX and is used to exchange data with the server. All modern browsers support the XMLHttpRequest object (IE5 and IE6 use ActiveX

Object)

The following article mainly introduces the use of ajax to interact with php data and partially refresh the page. Content, not much to say below, let’s take a look at the detailed introduction:

1. Introduction to syntax

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

Copy after login

1.2 php side receiving method

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

Copy after login

2. Detailed example

2.1 html Terminal 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>

Copy after login

2.2 Add the following js code to demo.html

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

Copy after login

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

Copy after login

3. The final effect is as follows

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!