简单的烧瓶jQuery AJAX
简单的烧瓶jQuery AJAX
提问于 2021-02-05 16:55:25
我正在尝试理解使用jQuery AJAX和Flask的逻辑，但是我做得不对。我一直在关注here和here教程，但没有解决方案。为了理解逻辑-我只是想在两个单独的字段中输入日期，并在一个普通的<p>标记中将这些日期返回到同一页。我怀疑是服务器接收日期的问题。提交相对表单不会向#result返回任何内容
HTML表单
<form>
<input name="StartDate" id="StartDate" type="date" class="form-control"></div>
<input name="EndDate" id="EndDate" type="date" class="form-control"></div>
<a href="#" id="generate"><button class='btn btn-info'>Generate</button></a>
</form>
<p id=result></p>jQuery -位于<body>标签的底部，在导入jQuery本身之后。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a#generate').bind('click', function () {
$.getJSON($SCRIPT_ROOT + '/generate_report', {
StartDate: $('input[name="StartDate"]').val(),
EndDate: $('input[name="EndDate"]').val()
}, function (data) {
$("#result").text(data.result);
});
return false;
});
});
</script>Flask服务器-我已导入相关依赖项
@app.route('/generate_report', methods=['GET', 'POST'])
def generate_report():
start_date = request.args.get('StartDate', 0, type=str)
end_date = request.args.get('EndDate', 0, type=str)
return jsonify(result=start_date + "-" + end_date)回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-06 00:47:34
请使用按钮发送表单，表单中的锚点没有意义。
我建议您使用窗体的单击事件，尽管按钮的“"submit"”事件也可以使用。preventDefault函数绕过了表单的标准行为，因此您可以使用getJSON自己发送表单。为了序列化表单数据，我使用了serialize函数，该函数将所有表单数据转换为符合条件的字符串。因此，数据以"application/x-www-form-urlencoded“的形式发送。
我在本例中没有使用变量$SCRIPT_ROOT，因为它在本地主机下基本上是空的，并且不是绝对必要的。
<form name="my-form">
<div class="form-group">
<label for="start-date">Start</label>
<input type="date" name="start-date" id="start-date" class="form-control">
</div>
<div class="form-group">
<label for="end-date">End</label>
<input type="date" name="end-date" id="end-date" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Generate</button>
</form>
<p id=result></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form[name='my-form']").submit(function(event) {
event.preventDefault();
const formData = $(this).serialize();
$.getJSON("/generate_report", formData, function(data) {
$("#result").text(data.result);
});
});
});
</script>默认情况下，request.args.get的结果类型为str。如果表单域为空，则get始终返回None。将绕过由于缺少值而可能出现的KeyError。
@app.route('/generate_report')
def generate_report():
start_date = request.args.get('start-date')
end_date = request.args.get('end-date')
return jsonify(result=f'{start_date} - {end_date}')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66060275
复制相关文章
相似问题
腾讯云开发者
