zoukankan      html  css  js  c++  java
  • ajax数据交互--GET

    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());
    ?>

    这里是点击获取的时间,点击按钮后页面不会刷新,实现了局部的数据交互,显示为:

    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    2019 SDN上机第7次作业
    第01组 Beta冲刺(4/5)
    第01组 Beta冲刺(3/5)
    第01组 Beta冲刺(2/5)
    第01组 Beta冲刺(1/5)
    2019 SDN上机第6次作业
    2019 SDN上机第5次作业
    SDN课程阅读作业(2)
    第01组 Alpha事后诸葛亮
    第01组 Alpha冲刺(6/6)
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11147177.html
Copyright © 2011-2022 走看看