Flask与JQuery：如何用JQuery加载另一个页面

Question

我有一个表单，用户可以在里面输入搜索词：

<form class="navbar-form navbar-left" role="search">
   <div class="form-group">
       <input type="text" class="form-control" id="search-val" placeholder="Search">
   </div>
   <button type="submit" class="btn btn-default" id="search-btn">Submit</button>
</form>

我想获取用户输入的内容，然后调用一个特定的页面。比如说 /index?search_term=foo

我试着用JQuery来实现这个，做了一些尝试，比如：

$('#search-btn').on('click',function(){
    var search_term = $('#search-val').val();
    $.get( "/?search_term="+search_term);
});

在Python那边，我试着这样获取参数：

s = request.args.get('search_term', '')

但是没有成功。页面只是刷新了，Python没有接收到 search_term。我对Flask还不太熟悉，请多多包涵。

Answer 1

你忘记取消默认的操作了，默认操作是提交页面：

$('#search-btn').on('click',function(){
    var search_term = $('#search-val').val();
    $.get( "/?search_term="+search_term);
    return false;
});

如果不加上 return false，浏览器就会自动提交表单，这样的话就会用 GET 方法在和页面相同的地址上请求数据（因为没有设置 action 属性）。这也会导致任何正在进行的 AJAX 请求被取消。

当然，你的 $.get() 调用在浏览器上还是不会有任何效果，但至少通过取消默认的表单提交，你可以看到服务器端的效果。