zoukankan      html  css  js  c++  java
  • 页面返回无刷新

    a.php

    <?php
    $arr1 = array(1, 'heiyeluren', '男18');
    echo json_encode($arr1);
    ?>

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
        <script src="js/jquery.min.js"></script>
        <style type="text/css">
            .wrap {
                margin: 50px;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <div>
            <a class='tab-option' data-tab-id='00' href="a.html" onclick="setSess()">首页</a>
            <p id="text"></p>
        </div>
    </div>
    </body>
    <script>
        var back = sessionStorage.getItem('Back');
        if (back != 'Success') {
            getData();
        } else {
            sessionStorage.removeItem('Back');
            setOld();
        }
    
        function setOld() {
            var backData = JSON.parse(sessionStorage.getItem('BackData'));
            document.getElementById('text').innerHTML = backData[2];
        }
    
        function setSess() {
            sessionStorage.setItem('Back', 'Success')
        }
    
        function getData() {
            $.ajax({
                url: 'http://localhost:8088/Demo/data/a.php',
                type: 'get',
                async: true,
                data: {},
                timeout: 5000,
                dataType: 'json',
                beforeSend: function (xhr) {
                    console.log(xhr)
                    // console.log('发送前')
                },
                success: function (data) {
                    console.log(data);
                    sessionStorage.setItem('BackData', JSON.stringify(data));
                    document.getElementById('text').innerHTML = data[2];
                },
                error: function (xhr, textStatus) {
                    // console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    // console.log('结束')
                }
            });
        }
    </script>
    </html>

    a.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
        <style type="text/css">
            .wrap{
                margin: 50px;
                width: 2500px;
                height: 2500px;
                background: url('images/30.png') 100% 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
         <div>
             <div><a href="javascript:window.history.back(-1);">返回上一页</a></div>
             <a href="index.html">页面跳转</a>
         </div>
     </div>
    </body>
    <script>
    
    </script>
    </html>
  • 相关阅读:
    dubbo学习(一)认识
    MySQL学习(九)小结
    MySQL学习(八)删除表数据
    MySQL学习(六)change-buffer
    RPC 学习(一)认识
    MySQL学习(五)事务隔离
    MySQL学习(四)死锁及死锁检测
    计算机操作系统 --- 进程和进程的上下文切换
    MySQL 学习(三)事务学习
    消息队列(七)--- RocketMQ延时发送和消息重试(半原创)
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7380737.html
Copyright © 2011-2022 走看看