无页面刷新的Python Flask Web应用程序导航

1条回答

网友

1楼 · 发布于 2024-04-24 14:29:52

正如@klausd.在评论部分中提到的，您想要实现的目标只能使用Javascript实现。也许你的问题是

How can I send a request to my server-side (to get or fetch some information) and receive back a response on the client-side without having to refresh the page unlike the POST method usually does?

我将尝试解决上述问题，因为这可能是你的情况

潜在的解决方案

为此，请使用Ajax。构建一个函数，将带有特定信息的有效负载发送到服务器，一旦收到响应，您将使用该数据动态修改希望修改的网页部分

让我们首先为问题建立正确的上下文。假设您想按项目类别筛选一些项目，并由用户决定。这就是AJAX的思想，用户可以从服务器异步发送和检索数据

HTML（待修改的div）

<div class="row" id="construction-projects"></div>

Javascript（客户端）

$.post('/search_pill', {
    category: category, // <   This is the info payload you send to the server.
  }).done(function(data){ // <! - This is a callback that is being called after the server finished with the request.
    // Here you dynamically change parts of your content, in this case we modify the construction-projects container.
    $('#construction-projects').html(data.result.map(item => `
      <div class="col-md-4">
        <div class="card card-plain card-blog">
            <div class="card-body">
                <h6 class="card-category text-info">${category}</h6>
                <h4 class="card-title">
                  <a href="#pablo">${item.title_intro.substring(0, 40)}...</a>
                </h4>
                <p class="card-description">
                  ${item.description_intro.substring(0, 80)}... <br>
                  <a href="#pablo"> Read More </a>
                </p>
              </div>
        </div>
    </div>
    `))
    
  }).fail(function(){
    console.log('error') // <!   This is the callback being called if there are Internal Server problems.
  });
}

构建一个函数，该函数将通过ajax获取当前页面，而不是整个页面，只是从服务器获取有问题的div。然后（再次通过jQuery）将数据放在有问题的同一个div中，并用新内容替换旧内容

烧瓶（服务器端）

''' Ajax path for filtering between project Categories. '''
@bp.route('/search_pill', methods=['POST'])
def search_pill():
    category = request.form['category']
    current_page = int(request.form['current_page'])
    
    ## Search in your database and send back the serialized object.

    return jsonify(result = [p.serialize() for p in project_list])

网友

2楼 · 发布于 2024-04-24 14:29:52

谢谢@CaffeinatedCod3r、@Klaus D和@newbie99的回答

我想出来了。代替使用Flask，我们可以使用Angular JS路由进行导航

以下是我提到的例子：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<head>
    <base href="/">
</head>
<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="banana">Banana</a>
<a href="tomato">Tomato</a>

<p>Click on the links to change the content.</p>

<p>Use the "otherwise" method to define what to display when none of the links are clicked.</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("/banana", {
        template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
    })
    .when("/tomato", {
        template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
    })
    .otherwise({
        template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
    });
    $locationProvider.html5Mode(true);
});
</script>

</body>
</html>

通过使用$locationProvider.html5Mode(true)，我能够从URL中删除#

相关问题更多 >

编程相关推荐

热门问题

热门文章