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，如果存在 return false，我不知道是否需要 e.preventDefault()。

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>

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

3 个答案: