GET方法实现从服务器获取数据
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> function funget(){ var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest; }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById('content').innerHTML = xhr.responseText; } } xhr.open('GET','get.php',true); xhr.send(); } </script> <style> .root{ text-align: center } #content{ color: red; font-size: 30px; } </style> </head> <body> <div class="root"> <button onclick="funget()">点一下</button> <br><br><br> <div id="content"></div> </div> </body> </html>
页面是这样:
点击按钮 获取数据 PHP代码部分
<?php echo 'GET方法<br>'; echo date('Y-m-d H:i:s',time()); ?>
这里是点击获取的时间,点击按钮后页面不会刷新,实现了局部的数据交互,显示为: