我正在尝试使用 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);
我的“/search”路线定义如下:
@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>
flask 代码
@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.
关于jquery - AJAX 请求在 Flask 中执行搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41475945/