使用 Ajax 将数据发送到 Django 模型

Question

我创建了以下 Ajax 请求以将数据发送到我的 views.py。发送请求后，视图应将其保存在我的数据库中。我的实际代码的问题是我在表单中提交的值没有被保存。

这是我尝试过的： HTML/JS

<script>
$(document).ready(function () {

  $("#test").submit(function (event) {
    $.ajax({
      type: "POST",
      url: "/ajtest/",
      data: { csrfmiddlewaretoken: "{{ csrf_token }}",
            state:"inactive",
        data: $('#test').serialize(),
      },
      success: function () {
        $('#message').html("<h2>Submitted.</h2>")
      }
    });
    return false; 
  });

});
</script>

<form method='post' id='test'>
  {% csrf_token %}
  <input type="text">
  <input type='submit' value='Test button'/>
  <div id='message'>Initial text</div>
</form>

这是视图：

def ajtest(request):
    if request.method == 'POST':

        model = MyModel()
        model.value = request.POST['data']
        model.user = request.user
        model.save()

        messages.success(request, f"Success!!")

    else:
        messages.success(request, f"Error")
    return HttpResponse('ok')

这里，user 正在被保存。当我点击 Ajax 表单时，我看到数据库中出现了一条新记录，问题是，在 value 列中我没有看到表单中提交的数据，而是我会看到一个空白字段或，现在，请求的 CSRF 令牌。有人可以帮我找到问题吗？我确定它在 Ajax 请求中。

Answer 1

请尝试以下代码 sn-p。

<script>
  function getCookie(cname) {
    var name = cname + "=",
     decodedCookie = decodeURIComponent(document.cookie),
     ca = decodedCookie.split(';');
     for(var i = 0; i <ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
       return c.substring(name.length, c.length);
    }
  }
  return "";
 }


  // Generic Function to process Ajax Calls
  function callAJAX(url, header, parameters, req_type, successCallback, 
    beforeSendCallback, completeCallback ) {
    jQuery.ajax({
    type : req_type,
    url : url,
    headers : header ,
    data :  parameters,
    beforeSend : beforeSendCallback,
    complete : completeCallback,
    success : successCallback,
    error : function(xhr, textStatus, errorThrown) {
        console.log( 'error' + textStatus + ' ' + xhr + ' ' + errorThrown );
    },
    async: false
  });
 }


 $(document).ready(function () {
    $("#test").submit(function (event) {
        callAJAX( "/ajtest",
         {"X-CSRFToken": getCookie("csrftoken") },
         parameters={'data': $('#text_box').val()},
        'post',
         function(data){
           $('#message').html("<h2>Submitted.</h2>");

         }, null, null );
 return false; 
});


 });
</script>

<form method='post' id='test'>
 {% csrf_token %}
 <input type="text" id='text_box' name='input_val'>
 <input type='submit' value='Test button'/>
<div id='message'>Initial text</div>
</form>

Answer 2

您需要将name属性添加到<input type="text">

来自 jquery docs:

对于要包含在序列化字符串中的表单元素的值， 该元素必须具有名称属性。

添加名称属性为，

<form method='post' id='test'>
  {% csrf_token %}
  <input type="text" name="value">
  <input type='submit' value='Test button'/>
  <div id='message'>Initial text</div>
</form>

这是演示小提琴https://jsfiddle.net/nawarkhede/ajfvs58c/2/ .我可以看到正在传递数据。