实现详解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数据交互并且局部刷新页面所遇到的程序开发问题。

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

版权声明 1 本网站名称：小梁资源站
2 本站永久网址：https://www.lishihuge.xyz
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ763317809进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END