Я делаю приложение колбу.Пользователь отправляет форму, которая отправляется в колбу.Что-то сделано, и я пытаюсь отправить результаты обратно в html с помощью jquery (определяется как temp).Я хочу использовать jquery, потому что в конечном итоге я хочу динамически добавлять неупорядоченный список из колбы.
@app.route('/')
def index():
return render_template("index.html")
@app.route('/search', methods=['GET', 'POST'])
def search_form():
print(request.form)
x = request.form['id']
a = Vbulletin(x)
#a.reg_ver()
def result_gen():
return a.reg_ver()
result_gen()
temp = []
for s in result_gen():
text = s
print(text)
temp.append(text)
print(temp)
return jsonify(temp)
forumsearch.js:
$(document).ready(function(){
$("#submit").on('click',function(e){
e.preventDefault();
req = $.ajax({type: "POST",
url: "/search",
data: { id: $("#searchinput").val()},
//const resultList = document.getElementById("resultList")
});
req.done(function(e){
alert("POST was sent.");
$('#resultList').text(temp);
});
});
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title>UserFind Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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" id="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 id="resultList">{{ temp }}</p>
<div class="footer">
<p>©2019 Userfind</p>
</div>
</body>
</html>
Я попытался написать код, поэтому, когда запрос POST выполнен, jquery принимает переменную 'temp' и передает ее в html.но 'temp' нет в исходном коде html.
И консоль говорит:
ReferenceError: temp не определена forumsearch.js: 11: 13
что это за строка:
$('#resultList').text(temp);
Итак, как мне определить temp, чтобы она отображалась на странице (с помощью jquery)?