Question

我在用户点击提交按钮后通过ajax调用发送表单数据，然后在我的视图中处理此请求，但表单为空。我如何填写表格？

这是我的代码：

我的JS档案：

ReactDOM.render()

我的观点：

var csrftoken = getCookie('csrftoken');  //getCookie is a csrf_token generator
var form = $(this).closest('form')
$.ajax({
        url: form.attr("action"),
        data: {        // if I change this line to data: form.serialize(), it works fine!
            csrfmiddlewaretoken : csrftoken,
            form: form.serialize(),  
    },
        type: form.attr("method"),
        dataType: 'json',
        success: function (data)
        {
            //Do a bunch of stuff here
        }
})

我没有执行def task_edit(request, pk): task = get_object_or_404(Task, pk=pk) if request.method == 'POST': task_form = NewTaskForm(request.POST) # This is empty! else: task_form = NewTaskForm(instance=task) # This for populating the edit modal, works fine!，因为我需要使用ajax请求发送其他数据。我如何使这个工作？

Answer 1

您可以写如下： -

$form_data = $("#idofform").serialize();

然后在ajax

data : $form_data+'&key=value',

Answer 2

您可以使用https://www.formkeep.com之类的服务来使用AJAX捕获表单数据。

如果您已经在使用JavaScript框架，想要添加验证逻辑，或者不想在用户提交表单后重定向用户，这可能是个好主意。

您可以使用标准AJAX请求提交给FormKeep。为确保请求不会导致重定向，请确保将Accept标头设置为application / javascript。

给出以下形式：

<form id="newsletter-signup" action="http://formkeep.com/f/exampletoken" method="POST" accept-charset="UTF-8">
    <input type="hidden" name="utf8" value="✓">
    <input name="email" type="email">
    <input value="Submit" type="submit">
</form>

以下是如何使用jQuery提交表单的示例：

$(function() {
   $('#newsletter-signup').submit(function(event) {
event.preventDefault();

var formEl = $(this);
var submitButton = $('input[type=submit]', formEl);

$.ajax({
  type: 'POST',
  url: formEl.prop('action'),
  accept: {
    javascript: 'application/javascript'
  },
  data: formEl.serialize(),
  beforeSend: function() {
    submitButton.prop('disabled', 'disabled');
  }
}).done(function(data) {
  submitButton.prop('disabled', false);
});
});
});

就是这样。在FormKeep中安全地捕获了数据后，您可以轻松地存储，管理数据或将其与数以千计的其他系统（例如Google Docs，Hubspot和Mailchimp）连接。

如何使用来自ajax调用的数据在POST请求中填充django表单？

2 个答案: