如何通过表单发送数据进行处理，防止页面刷新？答案

【问题标题】：How to send data through a form for processing and prevent the page from refreshing?如何通过表单发送数据进行处理，防止页面刷新？
【发布时间】：2021-07-03 12:32:04
【问题描述】：

我正在处理我的第一个 django 项目，但遇到了一个我不知道如何解决的问题。我尝试了各种代码示例，但均未成功。我遇到了以下问题：我有一个如下所示的表单：

<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>

当我点击提交按钮时，默认情况下，处理程序会将我带到正在处理数据的购物车页面。为了更好的用户体验，我希望当有人点击“添加到购物车”按钮时，不要被扔到另一个页面。为此，我尝试了几个在 Internet 上找到的 JQuery 和 javascript 代码 sn-ps。它仍然无法正常工作。

$(document).ready(function () {
    $('#myform').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: "https://localhost:8080/product_details/" + {{product.pk}},
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#myform").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

上面的代码是最终的结果，但是还是不行。注意：当我在浏览器上查看页面源代码时，<script> </script> 块中的页面上没有出现以下脚本。

我的想法用完了（不是我有很多）

如果有人可以帮助我，我将不胜感激！

非常感谢您的宝贵时间！

【问题讨论】：

在您的模板中 - 您是将 JS 放在脚本标签中，还是有一个脚本标签指向 .js 文件（如：<script src="your_file.js" />）。不同之处在于您还必须设置 Django 静态文件（因为 JS、CSS 和媒体都是静态文件）。
嘿尼基。不，没有 src 文件。该代码位于 product_detail.html 上，并在其中显示。我有来自 bootstrap JS 的脚本和我从静态文件中使用的一些其他脚本，但是这个是写在页面上的。

标签： javascript python jquery django django-forms

【解决方案1】：

表单中的“action”属性告诉您在提交表单时重定向到哪里：

form action="{% url 'cart-add' %}"

您可以将action属性设置为：

action=""

它不应再重定向，或者您可以设置重定向到同一页面。

【讨论】：