什么是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数据交互并且局部刷新页面所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）