提交表單時如何防止頁面刷新？

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 class，請使用.className
• 要引用 HTML 元素，只需輸入name

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

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

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

Answer 2

您需要return false ，否則 function 完成后，function 將繼續執行默認行為：

<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 文檔，如果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>