提交表单时如何防止页面刷新？

Question

我正在尝试构建我的第一个网站，但遇到了一个我现在无法解决的问题。因此，当用户想要将商品添加到购物车或增加数量时，我希望在点击提交按钮时阻止页面刷新。我找了很多答案，我尝试应用 Ajax/JQuery，但没有成功。

这是我的代码：

html

<form action="{% url 'cart-add' %}" method="GET" id="myform">
     {% csrf_token %}
     <label>
        <input type="hidden" name="{{ product.pk }}">
        <input type="number" max="{{ product.quantity }}" min="1" name="quantity" value="1">
        <button type="submit" value="">Add to chart</button>
    </label>
</form>

Ajax/JQuery 脚本

<script type="text/javascript">
$(document).ready(function () {
    $('myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("myForm").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});
</script>

当我点击添加到购物车提交按钮时，它会将我带到“cart.html”。我不想这样做，而是想阻止这种情况并向用户发送一条消息，说明他/她的项目已成功添加。

有人可以帮助我吗？非常感谢您的宝贵时间。非常感谢！

Answer 1

$('myform') 是错字吗？应该是$('#myform')吗？

• 要引用 HTML 的 ID，请使用 #idName。
• 要引用 HTML 类，请使用 .className
• 要引用 HTML 元素，只需输入 name

$('myform') 正在寻找 <myform></myform> 元素。

$('#myform') 正在寻找<... id="myform"></...>

$('.myform') 正在寻找<... class="myform anotherRandomClass"></...>

Answer 2

你需要return false，否则，该函数在函数完成后会继续默认行为：

<script type="text/javascript">
$(document).ready(function () {
    $('#myform').on('submit', function(e) { // fix typo
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("myForm").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
        // Prevent function from saving
         return false;
    });
});
</script>

更新：查看jQuery documentation，如果e.preventDefault() 存在，我不知道是否需要return false。

Answer 3

您的表单正在正常提交，因为您的 jquery 选择器错误。您必须将$('myform') 更改为$('#myform')

<script type="text/javascript">
$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#myform").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});
</script>