浅析PHP+Ajax数据交互与页面局部刷新

浅析PHP+Ajax数据交互与页面局部刷新

在项目开发过程中数据交互是最基本的一项技能，而通过PHP开发的项目如果每次都通过简单的form表单提交，不仅用户体验不是很好外，也经常容易被戏称太low。

AJAX 是一种用于创建快速动态网页的技术，AJAX 可以使网页实现异步更新，这样就可以在不重新加载整个网页的情况下，对网页的某部分进行数据更新。

一、Ajax基础语法：

  1. $.ajax({
  2.  type: "post",        //数据提交方式（post/get）
  3.  url: "http://xxx/test/demo.php",   //提交到的url
  4.  data: {username:username,password:password},//提交的数据
  5.  dataType: "json",       //返回的数据类型格式
  6.  success: function(msg){
  7.   ...//返回成功的回调函数
  8.  },
  9.  error:function(msg){
  10.   ...//返回失败的回调函数
  11.  }
  12. });

二、后台PHP接收数据：

  1. <!--?php
  2.  $username=$_POST['username']; //接收以post方式提交来的username数据
  3.  $password=$_POST['password'];
  4. ?>

三、示例代码：

1、html前端页面部分：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>ajaxTest</title>
  6. </head>
  7. <body>
  8.  <input type="text" id="username">
  9.  <input type="text" id="password">
  10.  <button id="sub">查询</button>
  11.  <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
  12. </body>
  13. <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  14. <script>
  15.  $(function(){
  16.  $('#sub').click(function(){
  17.   var username=$('#username').val();
  18.   var password=$('#password').val();
  19.   $.ajax({
  20.   type: "post",
  21.   url: "http://xxx/test/demo.php",
  22.   data: {username:username,password:password}, //提交到demo.php的数据
  23.   dataType: "json", //回调函数接收数据的数据格式
  25.   success: function(msg){
  26.    $('#text').empty(); //清空Text里面的所有内容
  27.    var data='';
  28.    if(msg!=''){
  29.    data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
  30.    }
  31.    $('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
  32.    console.log(data); //控制台输出
  33.   },
  35.   error:function(msg){
  36.    console.log(msg);
  37.   }
  38.   });
  39.  });
  40.  })
  41. </script>
  42. </html>

2、后台PHP部分：

  1. <!--?php
  2.  header('Content-type:text/json;charset=utf-8');
  3.  $username=$_POST['username'];
  4.  $password=$_POST['password'];
  5. //把接收到的数据返回前端页面
  6.  $data='{username:"' . $username . '",password:"' . $password .'"}';//组合成json格式数据
  7.  echo json_encode($data);//输出json数据
  8. ?>

最终我们就可以看到，输入用户名和密码之后，点击查询，用户名和密码会立即显示在页面上而无需刷新整个网页。整个实现起来比较简单。作为PHP的新手一定要多动手去敲一些代码，不要看到别人的代码直接复制，多练习才能熟能生巧。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！