AJAX 仅从循环中的最后一个表单获取数据（Django）

Question

我有一个 for 循环，可以在页面上创建多个表单。我希望能够使用 AJAX 将这些表单提交到另一个页面而无需刷新，但是无论我提交哪个表单，它都只会显示最后一个表单的值。

HTML 代码

{% for post in post_list %}
    <form class = "f_form" id="f_form" name = "myForm" method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="add">Submit</button>
    </form>
{% endfor %}

Jquery

<script type="text/javascript">

$(document).ready(function(){
    $(document).on('click','.add',function (event) {
        event.preventDefault();
        var element = $(this);

          $.ajax({
              url: '{% url "webscraper-favorited" %}',
              method: 'post',
              data:element.parent('.f_form').serialize(),
              success: function(data){
                  $('#message').html(data);
              }
          });
        return false;
    });
});
</script>

views.py

def favorited(request):

    if request.method == 'POST':
        favorited = request.POST.get('favorited')
        favorites.append(favorited)
        print(favorited)
    context = {
        'favorites' : favorites,
    }
    return render(request, 'webscraper/favorited.html', context)

现在脚本位于 for 循环之外，但我之前也尝试将其放入 for 循环中。我没有将脚本绑定到提交按钮，而是尝试将其绑定到表单 ID。我的尝试得到了同样的结果。

Answer 1

您在循环中的多个表单中使用相同的

id

。 HTML

id

属性在文档中必须是唯一的。当您在 jQuery 代码中使用

$('#f_form')

时，它仅选择带有

id

的第一个表单。

修改 HTML 和 jQuery 代码以使用类选择器而不是表单的

id

。这是更新版本：

HTML代码：

{% for post in post_list %}
    <form class="f_form" name="myForm" method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="add">Submit</button>
    </form>
{% endfor %}

jQuery 代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('submit', '.f_form', function(event) {
            event.preventDefault();
            var form = $(this);

            $.ajax({
                url: '{% url "webscraper-favorited" %}',
                method: 'post',
                data: form.serialize(),
                success: function(data) {
                    $('#message').html(data);
                }
            });

            return false;
        });
    });
</script>