Jquery AJAX请求在Flask中执行搜索_Jquery_Python_Json_Ajax_Flask

Jquery AJAX请求在Flask中执行搜索

jquery python json ajax flask

Jquery AJAX请求在Flask中执行搜索,jquery,python,json,ajax,flask,Jquery,Python,Json,Ajax,Flask,我正在尝试使用AJAX创建一个搜索功能。我的意思是，我点击输入框右边的按钮，然后它显示结果而不重新加载页面。请参见此处myHTML，以在当前主页中显示输入表单（前端） <li> <input type="text" size="18" name="query"> ? <a href="/search" id=searc

我正在尝试使用AJAX创建一个搜索功能。我的意思是，我点击输入框右边的按钮，然后它显示结果而不重新加载页面。请参见此处myHTML，以在当前主页中显示输入表单（前端）

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

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

@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请求应该是这样的：

这就是我得到的：

因此，我将politicDict（pythonfile）改为“None”，而不是“diogo”

任何帮助都将不胜感激

致以最良好的祝愿

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

这可能已经很晚了，但它可以帮助其他遇到类似问题的人！你的一些错误是：

您没有调用，这会阻止默认行为

您没有从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>

<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.