在 Django 应用程序中使用 JQuery 提交 HTML 表单答案

【问题标题】：HTML Form Submission with JQuery in a Django Application在 Django 应用程序中使用 JQuery 提交 HTML 表单
【发布时间】：2018-08-08 23:44:10
【问题描述】：

我使用以下 HTML 和 JQuery 代码来浏览网站中的页面（我也使用 Django；因此，使用双花括号）。我的代码只在 Safari 中运行良好，但在 Firefox、Chrome 和 Opera 中运行良好，尽管它在逻辑和语法上看起来都是正确的。任何想法为什么它不起作用？提前感谢您的帮助。

更多信息：我现在正在使用 Django 开发服务器。我的操作系统是 macOS High Sierra (10.13.6)。

<form id="myform" action="..." method="get">
    <a class="pg-nav" data-nav-value="-1" href="">Previous</a>
    <span id="pg-cur">{{ pageNumber }} / {{ totalNumPages }}</span>
    <a class="pg-nav" data-nav-value="1" href="">Next</a>

    <input id="pg" type="hidden" name="pg" value="0">
</form>


$('.pg-nav').click(function() {
    var curPage = parseInt($('#pg-cur').text());
    var navVal = parseInt($(this).data('nav-value'));
    var newVal = curPage + navVal;
    $('#pg').val(newVal);
    $('#myform').submit();
});

【问题讨论】：

当你说它不起作用 - 这是否意味着“提交表单但值错误”、“不提交表单”、“提交表单但服务器似乎没有给出正确的结果”或其他什么？如果表单未提交，您是否看到任何浏览器控制台错误？
好问题。我应该解释发生了什么。在 Firefox 中，重新加载相同的页面。换句话说， pg 输入的值不会改变。它保持不变。

标签： jquery html django forms

【解决方案1】：

您的链接仍会尝试重新加载页面，因为您允许处理 a 标记的默认行为。您可以使用.preventDefault() 方法阻止它：

$('.pg-nav').click(function(e) {
    ...
    $('#myform').submit();
    e.preventDefault();
});

【讨论】：