Django AJAX 表单

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    $("#my-form").on("submit", function (event) {
      event.preventDefault(); // 阻止表单默认提交行为
      $.ajax({
        type: "POST", // 请求类型
        url: "/submit-form/", // 提交表单的 URL
        data: {
          csrfmiddlewaretoken: "{{ csrf_token }}", // Django CSRF 保护
          name: $("#id_name").val(), // 表单字段的值
          content: $("#id_content").val(),
        },
        dataType: 'json', // 服务器返回数据的类型
        success: function (response) { // 请求成功的回调函数
          alert(response.message);
        },
        error: function (xhr, status, error) { // 请求失败的回调函数
          alert(error);
        },
      });
    });
  });
</script>

from django.shortcuts import render
from django.http import JsonResponse

def submit_form(request):
    if request.method == 'POST':
        # 处理表单提交逻辑
        name = request.POST.get('name')
        content = request.POST.get('content')

        # 返回 JSON 格式的响应
        return JsonResponse({'message': f'Thanks for your feedback about {name}!'})

    else:
        # GET 请求，渲染表单页面
        return render(request, 'form.html')

{% csrf_token %}
<form id="my-form" method="post">
  <div>
    <label for="id_name">Name:</label>
    <input type="text" name="name" id="id_name" required >
  </div>
  <div>
    <label for="id_content">Content:</label>
    <textarea name="content" id="id_content" rows="4" required ></textarea>
  </div>
  <input type="submit" value="Submit">
</form>

<style>
  /* 禁用默认的表单提交样式，避免误操作 */
  form {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
</style>