如何从一个Ajax调用向Flask提交数据，并从另一个Ajax调用在Flask中返回其响应？
如果标题有点混乱，很抱歉。StackOverflow上的一位好心的用户帮助我让我的Flask应用程序显示一些刮取的数据，只是现在我在函数中添加了一个参数，以便我可以刮取我想要搜索的数据。我有一个输入框，我希望能够从中获取数据，并将其作为字符串传递到Flask中的python函数中 当前HTML端如何从一个Ajax调用向Flask提交数据，并从另一个Ajax调用在Flask中返回其响应？,ajax,python-3.x,forms,post,flask,Ajax,Python 3.x,Forms,Post,Flask,如果标题有点混乱，很抱歉。StackOverflow上的一位好心的用户帮助我让我的Flask应用程序显示一些刮取的数据，只是现在我在函数中添加了一个参数，以便我可以刮取我想要搜索的数据。我有一个输入框，我希望能够从中获取数据，并将其作为字符串传递到Flask中的python函数中 当前HTML端 <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> &
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>NBA Data Web App</title>
</head>
<body>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin = "anonymous"></script>
<form id = "nameForm" method = "POST" role = "form">
<input name = "text">
<button id = "searchBtn"> Search </button>
</form>
<div id = "container"></div>
<script type = "text/javascript">
//Function to take place when our search button is clicked
$('button#searchBtn').click(function() {
$.ajax({
url: '/_get_data',
data: $('form').serialize(),
type: 'POST',
success: function(response) {
console.log = response;
},
error: function() {
alert('Failure in first Ajax call');
}
});
/*Everything below this was working before, as I only made one ajax call when a button was pressed. Now, when I press the button, I want to pass its contents as a string to my scrape_data() function in Flask, and return, and display, its contents as shown below. */
//Declare our list so we can print something, and loop through it later
var data_list;
//Variable for our HTML table
var rowMax = 29, html = "<table><tr>";
//Post request
$.post('/_get_data', {
//If done, do this
}).done(function(response) {
/* Assign our scraped data to our variable that was declared earlier,
which is turned into an array here in JS */
data_list = response['data'];
//Declare some variables for making our table
var perRow = 1, count = 0, table = document.createElement("table"),
row = table.insertRow();
//Loop through the data and add it to the cells
for (var i of data_list) {
//Insert a cell for each piece of data
var cell = row.insertCell();
//Add the data to the cell
cell.innerHTML = i;
//Increment our count variable
count++;
//If we have met our set number of items in the row
if (count % perRow == 0) {
//Start a new row
row = table.insertRow();
}
}
//Add the table to our container in our HTML
document.getElementById("container").appendChild(table);
//If request fails
}).fail(function() {
alert("request failed");
});
});
</script>
</body>
</html>
我目前得到错误405方法不允许。我不确定我在第一个Ajax调用中的语法是否不正确，或者我是否需要将其分成两个不同的
@app.route（URL）方法属性，并且没有指定操作，请求将被发送
。这里发生的事情是，当您单击搜索按钮时，它将发送两个post请求，一个发送到'/'
，另一个发送到'/'从ajax获取数据'
。在Flask路由中，如果您没有明确提供方法=[]
，则该路由将只允许GET
。如果从窗体中删除method属性，则不应获取method not allowed错误 我写了一个答案，解释了如何通过ajax和jquery将数据发送到FLASK。如果有麻烦，请随时回来找我。@Tobin我需要把这个电话分成两个电话吗？或者我可以让它像上面一样，因为你会注意到请求中有两个部分。第一个将数据发送到烧瓶。flask基于此数据执行其操作，并通过Ajax返回结果。在这里，您可以检索这些数据并将其显示在页面上。所以从技术上讲，您不需要在代码中分离这些操作。@Tobin是的，我注意到了。我现在正在工作，我不确定我们是否在同一个时区，但我会在大约8小时后试一试。谢谢你的帮助help@Tobin我已经试着按照你的教程做了一些事情，但是，正如我在最新的StackOverflow帖子中所解释的，我现在遇到了一个404错误
rom flask import Flask, render_template, jsonify, request, escape, url_for
#Get our lists to post
headers = data_headers()
#Start the flask app
app = Flask(__name__)
#Start page
@app.route('/')
def index():
return render_template('index.html')
#What happens when our button is clicked
@app.route('/_get_data', methods = ['POST'])
def _get_data():
text = request.form['text']
#Here, I am trying to assign the contents of the input box of the form to a variable, so I can pass that variable as a parameter for my function.
data = scrape_data(text)
#Return the json format of the data we scraped
return jsonify({'data' : data})
#Run the app
if __name__ == "__main__":
app.run(debug = True)