浅析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"//回调函数接收数据的数据格式
  24.   success: function(msg){
  25.    $('#text').empty(); //清空Text里面的所有内容
  26.    var data='';
  27.    if(msg!=''){
  28.    data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
  29.    }
  30.    $('#text').html("用户名为:" + data.username + ",密码为:" + data.password); //在#text中输出
  31.    console.log(data); //控制台输出
  32.   },
  33.   error:function(msg){
  34.    console.log(msg);
  35.   }
  36.   });
  37.  });
  38.  })
  39. </script>
  40. </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的新手一定要多动手去敲一些代码,不要看到别人的代码直接复制,多练习才能熟能生巧。

你想把广告放到这里吗?

发表评论

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