Хочу вывести результаты ввода формы на тот же темплейт , не перегружая страницу. Я долго мучался, прежде чем написать сюда. Частично оно даже работает, но есть вопросы и они внизу под кодом.
@app.route('/', methods= ["GET", "POST"])
def homepage():
form = LoginForm()
if request.method == 'POST':
story = request.form.get('story')
username = request.form.get('username')
if story:
result = story + username
return jsonify(result=result)
else:
return jsonify(result='Input needed')
return render_template('return.html', form=form)
class LoginForm(FlaskForm):
username = StringField('username')
<body>
<div class='container'>
<form>
<div class="col-md-3">
<div class="form-group">
{{ form.username.label }}
{{ form.username(class_="form-control") }}
</div>
</div>
<input class="form-control" id="story" name="story" type="text" value="">
<br>
<p>{{ form.submit(class_="btn btn-primary") }}</p>
<a href=# id=submit><button class='btn btn-primary'>Submit</button></a>
</form>
<br>
<p><h2 align='center'>Result:</h2><h2 id=result align='center'></h2></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#submit').bind('click', function() {
$.post('/', {
story: $('input[name="story"]').val(),
username: $('input[name="username"]').val(),
}, function(data) {
$('#result').text(data.result);
});
return false;
});
});
</script>
Два вопроса.
1. При генерации html у меня соответственно две кнопки
<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Submit"></p>
и
<a href=# id=submit><button class='btn btn-primary'>Submit</button></a>
Вторая кнопка работает нормально и по ней ajax возвращает данные формы на ту же страницу. А первая нет. Первая выдает
«GET /?username=&story=&submit=Submit HTTP/1.1» 200 те GET запрос.
но если в роуте вместо if request.method == 'POST', я использую if form.validate_on_submit(): , то вторая тоже перестает работать. Хотелось бы использовать form.validate_on_submit(): и отдавать ввод формы обратно на тот же темплейт.
Второй вопрос. Мне обязательно надо перечислять все переменные в ajax скрипте? может я могу как-то забрать их все сразу вместе?
Этот тестовый код, который я вымучил за пару дней. Может быть можно сделать все красивее , я был бы очень рад как пояснениям, так и правильным примерам к задаче.
