javascript - Django 和 Ajax - 提交表单集

Question

我在尝试通过 Ajax 提交表单集时遇到问题。我正在做的一些信息是，用户输入一个单词，然后通过 Ajax 我获取它的长度，并根据该数字生成一个表单集。然后我用 for 循环打印出来，每个表单都有一个有效的按钮，它应该提交特定的格式来验证它。所以它为每个按钮提交一个表单。这是我的代码:

<div id="example1" type="hidden">
  {{ exampleForm.management_form }}
      {% for form in exampleForm %}
          <form onsubmit="return false;" method="GET" id="{{ form.prefix }}" >
          ( {{ form.letterOfWord }} + {{ form.keyToUse }} ) MOD 26 =
            {{ form.letterToFill }} <button name="action" id="validateButton" value="validate"> Validate </button>  <br>
          </form>

      {% endfor %}

还有我的 JavaScript 文件:

  $("#validateButton").on({
  click : function() {
    // var variable = document.getElementById('id_plaintext');
    // console.log(variable.value)
    console.log("Inside validate button function")
    var serializedData = $('form').serialize();
    console.log(serializeData);
    $.ajax( {
      url: "/exampleCaesar",
      type : "GET",
      data: { CSRF: 'csrf_token',
              serializedData
      },

      success : function(exampleData) {

      console.log(exampleData)


      }

    }); //END OF Ajax
  } //END OF FUNCTION


 }); //END OF validateButton

问题是，当我单击任何验证按钮时，不会提交任何内容。我知道这一点是因为我在 javascript 中有一个 console.log 来知道它何时进入。如果没有打印出来，那么它实际上并没有进入。

有什么建议吗？为此我一整天都伤透了脑筋。谢谢

Answer 1

您有多个 ID validateButton 。这可能是您问题的根源。据我所知，或者猜测，在这种情况下，jquery 只会在第一个表单的第一个按钮上触发。

此外，我不确定当您使用此代码时 jquery 是否会序列化正确的形式

var serializedData = $('form').serialize();

同样，您有多个 form在你的html中

此外，managment_form应该在 <form> 内，否则它不会被发送到 Django。查看文档 https://docs.djangoproject.com/en/1.9/topics/forms/formsets/#using-a-formset-in-views-and-templates