实现详解Ajax+php数据交互并且局部刷新页面【PHP教程】

!
也想出现在这里? 联系我们
信息

实现详解Ajax+php数据交互并且局部刷新页面,第1张

概述实现详解Ajax+php数据交互并且局部刷新页面

什么是AJAX?

国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLhttpRequest 是 AJAX 的基础,用于和服务器交换数据。所有现代浏览器均支持 XMLhttpRequest 对象(IE5 和 ie6 使用 ActiveXObject)

下面这篇文章主要介绍的是利用AJAX实现与PHP数据交互,并局部刷新页面的相关内容,下面话不多说,来一起看看详细的介绍:

一、语法简介

1.1 AJAX基本语法

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

1.2 PHP端的接收方法

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

二、示例详解

2.1 HTML端代码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>

2.2 在demo.HTML中加入以下Js代码

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

2.3 PHP端代码demo.PHP

<!--?PHP header('Content-type:text/Json;charset=utf-8'); $username=$_POST['username']; $password=$_POST['password']; $data='{username:"' . $username . '",password:"' . $password .'"}';//组合成Json格式数据 echo Json_encode($data);//输出Json数据?>

三、最终效果如下

demo下载地址

下载demo

相关学习推荐:PHP编程从入门到精通

总结

以上是内存溢出为你收集整理的实现详解Ajax+php数据交互并且局部刷新页面全部内容,希望文章能够帮你解决实现详解Ajax+php数据交互并且局部刷新页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

© 版权声明
THE END
喜欢就支持一下吧
点赞99 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容