django：html表单提交而不跳转到新页面或刷新/重新加载

Question

我是 django 和 html 的新手。下面是我的第一个简单在线计算器的测试网页。

我发现一个问题，当点击“提交”按钮时，它往往会跳转到一个新的网页或一个新的网页标签。这不是我想要的。一旦用户输入数据并单击“提交”按钮，我希望页面上的“结果”字段直接显示结果（即仅部分更新此字段）而不刷新/跳转到新页面。我还希望用户输入数据在点击“提交”后保留在同一页面中。

我看到可能有几种不同的方式来完成这项工作，iframe/AJAX。既然我是新手，那么实现这个目标最简单的方法是什么？顺便说一句，我不会写 javascripts。

html:

<form method="POST">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Enter value" />
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Enter value" />
    </div>
    <br />
    <div>{{ result }}</div>
    <button type="submit">Submit</button>
</form>

view.py

def post_list(request):
    result = 0
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)
        print(request.POST)
        print(result)

    context = {
        'result': result
    }
    return render(request, 'blog/post_list.html', context)

Answer 1

这是一个使用 Ajax 的简单示例，希望对您有用。

首先你需要改变post_list视图：

查看

from django.http import JsonResponse

def post_list(request):
   if request.method == "POST":
      num1 = request.POST.get('num_1')
      num2 = request.POST.get('num_2')
      result = int(num1) + int(num2)

      return JsonResponse({"result":result})

   else:
      return render(request, 'blog/post_list.html', context={"result":0})

我使用 JsonResponse 因为我只想在 ajax 中获取 result 数据并将其显示在 html 中，对于 GET 请求渲染 html 文件，对于 POST 请求使用 JsonResponse 返回一个类似语境。 你的 html 文件应该是这样的：

html

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>


<form method="POST" id="post-form">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Enter value" />
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Enter value" />
    </div>
    <br />
    <div id="result" >{{ result }}</div>
    <button type="submit" >Submit</button>
</form>

<script>
$(document).ready(
  $('#post-form').submit(function(e){
    e.preventDefault();
    var serializedData = $(this).serialize();

    $.ajax({
      type:"POST",
      url: "/your_url/",
      data:  serializedData,
      success: function(data){
        $("#result").text(data["result"]);
      }
    });
  })
);
</script>

首先我添加了jQuery cdn，然后添加了您的html文件，除了我在表单中添加了属性id=post-form并添加了id=result，然后添加了<script>标签并在您的表单提交时执行标签内的jquery函数（通过 id #post-form 检测事件）。

并通过序列化方法获取数据（num_1, num_2）然后使用Ajax发送POST请求到视图函数（post_list），在Ajax中你只需要传递serializedData和url（你也可以使用 Django 的 url 标记或将其设置为 action form 或...)，然后我们需要将数据发送到 html（表示我们从 View 接收到的结果数据）。

在 success 函数 Ajax 中，您可以将 html 标签添加到您的 html 文件或 替换一些值，...

在 Ajax 中，您必须指定 URL 以发送数据。 例如，如果你有这个 url.py

urls.py

from .views import post_list

urlpatterns = [ 
    path("posts_list/", post_list, name="post_list"),
]

在 ajax 中你可以像这样添加地址：

    $.ajax({
      type:"POST",
      url: "/posts_list/",
      ....

或者

    $.ajax({
      type:"POST",
      url: "{% url 'post_list' %}",
      ....

如果你在 urls.py 中有 app_name，你可以添加 url: "{% url 'app_name:post_list' %}",