如何在 django 中提交表单而不刷新？

Question

我知道这个问题可能与stackoverflow中的许多问题重复。 但这些并没有帮助我。 我试过这个，但没有刷新就没有成功。

我的models.py是：

class Messages(models.Model):
    id = models.CharField(max_length=8, primary_key=True)
    messages = models.TextField()

这是我的html

    <form action="{% url 'messages' %}" method="post" id="new_message_form">
        {% csrf_token %}
        <label for="">message</label><br>
        <textarea id="message" cols="30" rows="10"></textarea><br>
        <button type="submit">Submit</button>
    </form>

这是我的views.py ：

def messages(request):
    if request.method == "POST":
        message = Messages()
        message.messages = request.POST['message']
        message.save()
        return redirect('messages')

    return render(request, 'app/messages.html', context)

这是我的script ：

    $(document).on('submit', '#new_message_form', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/messages/',
            data: {
                message: $('#message').val(),
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            },
            success:function(){
                alert("New message created!")
            }
        });
    });

这导致 MultiValueDictKeyError

相反，我尝试了

message.messages = request.POST.get('message', False)

这只从输入中获取值并通过。 但是我不能在不刷新的情况下提交它。 谁能帮我？

编辑 1 - MultiValueDictKeyError

Internal Server Error: /messages/
Traceback (most recent call last):
  File "C:\Users\mowli\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\utils\datastructures.py", line 76, in __getitem__
    list_ = super().__getitem__(key)
KeyError: 'message'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\mowli\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
    response = get_response(request)
  File "C:\Users\mowli\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\core\handlers\base.py", line 115, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "C:\Users\mowli\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\core\handlers\base.py", line 113, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "C:\Users\mowli\Desktop\Projects\gcepac\app\views.py", line 17, in messages
    message.messages = request.POST['message']
  File "C:\Users\mowli\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\utils\datastructures.py", line 78, in __getitem__
    raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'message'
[16/Apr/2020 18:12:30] "POST /messages/ HTTP/1.1" 500 90361

编辑 2 实际上，使用此表单时甚至没有提交表单

message.messages = request.POST.get('message', False)

这将提交数据库中值为“False”的表单。 提交表单后，我应该收到警报吗？ 所以请省略这部分。

Answer 1

解决方案 1

让我们解决这个问题，有2个解决方案。 简单的方法只是消除无用疼痛的更好解决方案。 将脚本放入您的 HTML 文件中，并使用这一行

csrfmiddlewaretoken: '{%csrf_token%}'

代替

csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),

---

解决方案 2

另一个解决方案是修复您自己的解决方案。 AJAX 按钮不是提交按钮，它们只是按钮，从表单中删除action并将按钮类型更改为button ，它应该可以工作。

---

编辑：问题不在csrf_token中，但是我想将第一个解决方案展示为一种更简单的方法来实现您所需要的。

---

BUG 2为什么这不起作用，我以前回答过这个

Answer 2

我注意到你的脚本有问题。

csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken').val(),

如果您完全复制了它，那么它就是导致错误的原因。 尝试这个。

csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),