我正在尝试使用AJAX进行搜索。我的意思是,我单击输入框右侧的按钮,然后它显示结果而无需重新加载页面。在此处查看我的HTML,以显示当前主页中的输入表单(前端)。

<li>
    <p><input type="text" size="18" name="query"><br>
    <span id=result>?</span>
    <p><a href="/search" id=search>Go!</a>
</li>


然后,我创建了一个javascript文件,以执行该AJAX请求。看到:

$(function() {
var submit_form = function(e) {
  $.getJSON('/search', {
    query: $('input[name="query"]').val()
  }, function(data) {
    $('#result').text(data.result);
    $('input[name=query]').focus().select();
  });
  return false;
};
$('a#search').bind('click', submit_form);


我的“ /搜索”路线定义如下:

@home_blueprint.route('/search')
def search():
    sql = 'SELECT "publicName", "completeName" FROM "politics" WHERE '
    politicDict = request.args.get('query', 'No results were found', type=text)
    print politicDict # It returns 'No results were found'
    return render_template('home.html')


因此,假设我以该输入形式编写了“ diogo”(因此其val()应该为“ diogo”)。因此,URL请求应如下所示:

http://localhost:5000/search?query=diogo

这就是我得到的:

http://localhost:5000/search,因此我将politicDict(python文件)设置为“ None”,而不是“ diogo”

任何帮助将不胜感激,

最好的祝福。

编辑:修复了Python格式问题。

最佳答案

这可能很晚了,但是可以帮助陷入类似问题的其他人!您的一些错误是:


您不是在调用preventDefault()来阻止默认行为。
您没有从flask方法返回正确的JSON数据,因为您应该使用两种不同的方法,一种用于呈现页面,另一种用于获取数据(API)


在这里,我提出我的解决方案:

HTML和Javascript代码

<html>
  <li>
    <p><input type="text" size="18" name="query"></p>
    <br>
    <span id=result>?</span>
    <p><a href="/search" id=search>Go!</a></p>
  </li>
  <div id="result">
   Results will appear here!
  </div>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"></script>
<script>
$(document).on("click", "#search", function (e) {
    e.preventDefault();
        var search_term = $('input[name=query]').val().toLowerCase();
    console.log(search_term )
        $.ajax(
            {
                type: "GET",
                url: "{{url_for('search')}}",
                data: { "query": search_term },
                success: function (response) {
                        $("#result").empty(); //remove whatever is there and append whatever is returned
            $("#result").append(response.result) //append whatever you want to append
                }
            }
        )
    });
</script>


烧瓶代码

@home_blueprint.route('/home')
def home():
    return render_template('home.html')

@home_blueprint.route('/search')
def search():
    sql = 'SELECT "publicName", "completeName" FROM "politics" WHERE '
    politicDict = request.args.get('query') # get the data
    print politicDict # It returns 'No results were found'
    return {"result":politicDict} #you can return whatever result you get from SQL here but I am just
                       # returning the data you sent.

09-25 18:45