使用ajax实现无刷新改变页面内容和地址栏URL

2023年6月11日上午11:31 • JavaScript

当我们的网站需要异步加载数据时，我们就需要使用Ajax技术来实现无刷新改变页面内容和地址栏URL。下面是实现的攻略：

步骤一：创建HTML文件

在HTML文件中，我们需要添加一个按钮和用来显示Ajax返回结果的div容器，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="ajaxBtn">点击加载</button>
    <div id="ajaxContent"></div>
</body>
</html>

步骤二：使用jQuery实现Ajax请求

我们使用jQuery的ajax()方法来实现Ajax请求。当按钮被点击时，我们就发送一个Ajax请求，请求服务器返回数据，并将返回的数据插入到div容器中。同时，我们还需要使用history.pushState()方法来改变URL，以便在无刷新改变页面内容的同时也改变地址栏URL。代码如下所示：

$(document).ready(function(){

    $('#ajaxBtn').click(function(){

        $.ajax({

            url: 'your_ajax_url_here',            // Ajax请求的URL
            type: 'GET',                          // 请求类型
            data: {},                             // 请求参数
            success: function(response){          // 请求成功的回调

                // 将返回的数据插入到div中
                $('#ajaxContent').html(response);

                // 改变地址栏URL
                history.pushState({}, '', 'new_url_here');

            }
        });

    });

});

步骤三：使用服务器端框架返回Ajax响应

在服务器端，根据请求的URL，我们需要返回对应的数据。如果我们使用的是PHP框架，我们可以使用如下代码来实现：

public function ajaxAction(){

    $data = array( 'key1' => 'value1', 'key2' => 'value2' );

    header('Content-Type: application/json');   // 返回json数据
    echo json_encode($data);

}

如果我们使用的是Python框架Flask，我们可以使用如下代码来实现：

@app.route('/ajax')
def ajax():

    data = {'key1': 'value1', 'key2': 'value2'}

    return jsonify(data)

示例一：实现分页加载数据

假设我们的网站需要实现分页加载数据，并且需要在无刷新改变页面内容的同时也改变地址栏URL，我们可以按照如下步骤实现：

在HTML文件中添加分页导航控件，并设置每个链接的href属性为相应的Ajax请求URL。
设置每个链接的点击事件，当链接被点击时，发送Ajax请求，获取服务器返回的数据，并将返回的数据插入到div容器中。
使用history.pushState()方法改变地址栏URL。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页Ajax示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="pageNav">
        <a href="your_ajax_url?page=1">第一页</a>
        <a href="your_ajax_url?page=2">第二页</a>
        <a href="your_ajax_url?page=3">第三页</a>
    </div>
    <div id="ajaxContent"></div>
    <script>
        $(document).ready(function(){
            $('#pageNav a').click(function(event){
                event.preventDefault(); // 阻止链接的默认跳转行为
                var href = $(this).attr('href');
                $.ajax({
                    url: href,
                    type: 'GET',
                    data: {},
                    success: function(response){
                        $('#ajaxContent').html(response);
                        history.pushState({}, '', href);
                    }
                });
            });
        });
    </script>
</body>
</html>

示例二：实现模态框弹出

假设我们的网站需要实现一个模态框弹出效果，并且需要在无刷新改变页面内容的同时也改变地址栏URL，我们可以按照如下步骤实现：

在主页面中添加一个按钮，当按钮被点击时，发送Ajax请求，获取模态框的HTML代码。
在服务器端返回模态框的HTML代码。
将获取到的HTML代码插入到页面中，并使模态框显示出来。
使用history.pushState()方法改变地址栏URL。