AJAX Post 不发送表单数据答案

【问题标题】：AJAX Post not sending form dataAJAX Post 不发送表单数据
【发布时间】：2013-10-23 18:42:40
【问题描述】：

我在下面有以下AJAX POST，出于某种原因查看我的日志记录（服务器端），它发送的请求是空白的{}，而不是发送 JSON 数据。我已经用尽了所有可能的服务器端问题，这是脚本不发送数据的客户端问题。为什么？

bootstrap-wizard.js 在这里找到 -> GitHub

我的页面代码覆盖了脚本提交：

<script src="{{ STATIC_URL }}js/bootstrap-wizard.js"></script>
<script type="text/javascript">
   $(function() {

       var options = {width:1000};
       var wizard = $("#some-wizard").wizard(options);

        $("#open-wizard").click(function() {
        wizard.show();
    });


wizard.on("submit", function(wizard) {

        $.ajax({
                  url: '/api/v1/rewards/campaigns/',
                  type: 'POST',
                  contentType: 'application/json; charset=UTF-8',
                  data: $('#wizard').serialize(),
                  beforeSend: function (request) {

                      request.setRequestHeader("X-CSRFToken", $('input[name="csrfmiddlewaretoken"]').val());
                  },

                  success: function(data, textStatus) {
                        wizard.submitSuccess(); // displays the success card
                        wizard.hideButtons(); // hides the next and back buttons
                        wizard.updateProgressBar(0); // sets the progress meter to 0

                      console.log('success');

                  },
                  error: function(errorThrown){
                     // data = JSON.parse(errorThrown.responseText);

                       wizard.submitError(); // display the error card
                       wizard.hideButtons(); // hides the next and back buttons


                      console.log(errorThrown);
                  }
              });



  });



   });



</script>

这是我的表格：

<form action="" method="post" class="form-horizontal" id="wizard" enctype="application/json" >
{% csrf_token %}

<div class="wizard" id="some-wizard">
   <h1>{% trans "Setup Wizard" %}</h1>


   <div class="wizard-card" data-cardname="card1">
      <h3>{% trans "General" %}</h3>

       etc, etc <=== all my form fields here

   </div>

【问题讨论】：

将你的javascript包含在<script>标签中
你在ajax请求之前有没有试过console.log($('#wizard').serialize())？它是否包含正确的数据？
@tborychowski 唯一的输出是 csrfmiddlewaretoken=kr5Ixi1T62E9hhoUNabC1dAYvVXs5WeR 没有其他字段数据
您的 Javascript 变量 wizard 是对 DIV 而非表单的引用。所以wizard 元素没有submit。我无法想象 $.ajax 会被调用

标签： javascript ajax json jquery

【解决方案1】：

serialize() 返回键/值格式的 URL 编码数据 (x-www-form-urlencoded)，而不是 JSON。如果您的服务器端需要 JSON，那么您需要更改数据参数：

$.ajax({
    ...
    data : JSON.stringify({ input_a : 'value a', input_b : 'value b' }),
    ...
});

请参阅this question 了解如何将表单自动转换为 JSON。

【讨论】：

我明白了，在脚本示例中，他们总是只使用 data: $('#wizard').serialize() 你建议的工作，但我有点困惑
如果您的服务器端期待 x-www-form-urlencoded 数据，$('#wizard').serialize() 是有效的，但如果它期待 JSON，则不是。
这是首字母缩略词 JSON 的常见歧义。通常，它指定用 Javascript 编写文字对象的方式。今天，它主要指的是“文字 Javascript 对象的字符串表示”。前者没有换行引号，而第二个有 ... {...} 和 "{...}"
@devnull69 JSON is and was JavaScript Object Notation （对象的字符串表示），我不记得意思最近发生了变化？ “今天……大部分时间”是什么意思？
您确定下划线在对象文字键中有效吗？我的猜测是您需要将它们包装在''/""