Ajax 表格未在 django 中发送数据

Question

我正在尝试在不刷新页面的情况下将数据发送到 Django。 所以我使用的是ajax。 创建了 Django model 并形成

class MyModel(models.Model):
    text=models.CharField(max_length=100)

class MyForm(forms.ModelForm):
    class Meta:
        model=MyModel
        fields = "__all__"

然后通过views.py将表单发送到HTML页面

def home(request):
    print(request.POST.get('text',False))
    form = MyForm(request.POST)
    if request.method=='POST':
        print(request.POST.get('text',False))
        if form.is_valid():
            data=form.save()
    return render(request,'home.html',{'form':form})

在 HTML 模板中创建表单

<form action = ""  id="post-form" method = "post">
      {% csrf_token %}
      
      {{ form.as_p }}
      <input type="submit" value="submit" id="submit-button">
    </form>

这是 javascript 文件

$(document).on('submit','#post-form',
    function(x){
        x.preventDefault();
        console.log("button clicked")
    $.ajax({
            type:'POST',
            url:'/',

            data:{
                text:$("id_text").val(),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                },
           

            success:function(){
                alert('Saved');
                      }
                    })            
    
    
    }

)

我认为这可能是 URL 的问题，如果我这样设置 url

url:'{% url "home" %}',

然后在控制台中，我收到了这个错误

XHR POST http://127.0.0.1:8000/%7B%%20url%20%22home%22%20%%7D

我找不到，问题出在哪里。

Answer 1

你应该使用#来选择 id，所以使用text:$("#id_text").val() 。

对于使用动态 url，使用如下：

url:"{% url 'home' %}",

有关使用动态 url 的更多信息，请参阅此问题。

编辑：

使用动态 url 的一种方法是通过onsubmit事件传递它，所以试试这个：

模板文件或首页.html

 <form id="post-form" method="POST" onsubmit="checking('{% url 'home' %}')">
        {% csrf_token %}
        
        {{ form.as_p }}
        <input type="submit" value="submit" id="submit-button">
    </form>

.js 文件：

function checking(dynamicUrl) {
  $(document).on("submit", "#post-form", function (x) {
    x.preventDefault();
    console.log("button clicked");
    $.ajax({
      type: "POST",
      url: dynamicUrl,

      data: {
        text: $("#id_text").val(),
        csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val(),
      },

      success: function () {
        alert("Saved");
      },
    });
  });
}