烧瓶:如何使用AJAX将值从for循环传递到html？
烧瓶:如何使用AJAX将值从for循环传递到html？
提问于 2019-09-14 21:54:58
我正在制作一个web应用程序，它检查用户是否存在于各种论坛中，然后通过AJAX在网页上动态返回结果。
我使用的是烧瓶，它调用原始python脚本。
main.py：
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/', methods=['POST'])
def search_form():
x = request.form['searchinput']
a = Vbulletin(x)
def result_gen():
return a.reg_ver()
result_gen()
for s in result_gen():
text = s
return render_template("index.html", text=text)
if __name__ == "__main__":
app.run(debug=True)当每个响应进来时，变量text就是我想要在Html中动态显示的内容。现在我的代码编写方式只显示最后一项。
AJAX：
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data : {
x : $('#searchInput').val(),
},
type : 'POST',
url : '/'
})
event.preventDefault();
});
});index.html：
<!DOCTYPE html>
<html>
<head>
<title>UserFind Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script type="text/javascript" src="{{url_for('static', filename='forumsearch.js')}}"></script>
</head>
<body>
<nav>
<ul id="navlist">
<h1>Userfind</h1>
<li><a class="btn" href="#home">Home</a></li>
<li><a class="btn" href="#contact">Contact</a></li>
<li><a class="btn" href="#about">About</a></li>
<form method="POST" name=searchbar>
<ul id="navsearch">
<li class="search">
<input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
</li>
<li><button type="submit" class="btn-default">Submit</button></li>
</ul>
</form>
</ul>
</nav>
<script>
var btnContainer = document.getElementById("navlist");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
<p>{{ text }}</p>
<div class="footer">
<p>©2019 Userfind</p>
</div>
</body>
</html>我发现了很多关于如何传递单个值(或者一次传递多个值)的信息，但是当接收到响应时，如何将每个值从烧瓶动态地传递到html呢？
编辑:这是用a.reg_ver()调用的代码：
def reg_ver(self):
urlfile = json.load(open("/home/vbulletin_regversion_SHORT_TESTING_dict.txt"))
for url, url_veri in urlfile.items():
try:
payload = {'username': self.name, 'securitytoken': 'guest', 'do': 'verifyusername'}
headers = {'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0'}
s = requests.Session()
s.get(url, headers=headers)
response = s.post(url_veri, headers=headers, data=payload)
soup = BeautifulSoup(response.text, "html.parser")
message = soup.find('message').text
if self.name in message:
result = (url, "user found!!! I SAID USER FOUND!!!")
yield result
elif message == "Username is valid and not in use.":
result = (url, "user not found")
yield result
else:
result = (message, "possible error")
yield result代码从列表中的论坛中检查用户，然后生成结果。我用这个来传递结果烧瓶：
def result_gen():
return a.reg_ver()
result_gen()
for s in result_gen():
text = s我可以附加到一个临时列表中，并动态地将每个结果添加到html中吗?还是我这样做是错误的呢？
回答 1
Stack Overflow用户
发布于 2019-09-14 23:23:47
Flask应该只向AJAX请求发送text (或JSON)，而AJAX应该将text (没有HTML)和append()发送到已经在浏览器中的HTML。这样，它就可以将新行添加到现有文本中。
工作实例：
from flask import Flask, render_template_string, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template_string('''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form method="POST">
<input type="text" id="searchinput" name="searchinput">
<button type="submit">Submit</button>
</form>
<p></p>
<script>
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data: {x: $('#searchinput').val()},
type: 'POST',
url: '/',
}).done(function(data){
$('p').append(data+"<br>");
});
event.preventDefault();
});
});
</script>
</body>
</html>''')
import datetime
@app.route('/', methods=['POST'])
def search_form():
print(request.form)
data = request.form.get('x', '')
text = str(datetime.datetime.now()) + " | " + data
return text
if __name__ == "__main__":
app.run(debug=True)Flask还可以检查它是否真的是AJAX请求，并在它不是AJAX时发送完整的AJAX。但要保留所有的文字，就必须在某种程度上记住它们--例如。文件，数据库或曲奇。
顺便说一句:你几乎没有犯过什么错误：
$('#searchinput')应该有较低的i，但您有I。AJAX以x的形式发送数据--参见data: {x: $('#searchinput').val()},，但flask试图以searchinput的形式获取数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57939550
复制相关文章
相似问题
腾讯云开发者
