Question

情况：我的页面列出了许多提交内容。在每个提交旁边，我想添加一个按钮来接受所述提交。我是通过表格来做这件事。

html：

{% for submission in submissions %}
    <div class="submission-container">

        <div class = "col-sm-6">
            {{ submission.submission_title }} </a>
        </div>

        <div class = "col-sm-6">
            <form action="" method="post" class="accept_submission" style="float:left;">
                {% csrf_token %}
                <input type="hidden" class="data-submission-id" value="{{ submission.SUBMISSION_ID }}" />
                <input type="hidden" class="url-data" value="{% url 'submission_accept' %}" />
                <input type="submit" value="Accept" class="btn btn-info" />
            </form>

        </div>
    </div>
{% endfor %}

jquery：

$('.accept_submission').on('submit', function(event){
    event.preventDefault();
    var data_post = { submission_id : $('.data-submission-id').val() }
    execute_ajax_post(data_post);
});

function execute_ajax_post(data_post) {
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    $.ajax({
        url : $('.url-data').val(),
        type : "POST",
        data : data_post,
        success : function() {
            console.log("success");
        },
    });
};

现在的问题是我希望每个表单都传递与该按钮关联的特定提交的 submission_id 。但是，当我使用类时，所有按钮都会传递第一个列出的提交的submission_id。如果我使用 id =＆＃34; accept_submission＆＃34; ，只有第一个按钮有效。我怎样才能让它正常工作？

Answer 1

你在dom中获取所有.data-submission-id元素会限制它使用jquery＆＃39; s

$('.accept_submission').on('submit', function(event){
    event.preventDefault();
    var data_post = { submission_id : $(this).find('.data-submission-id').val() }
    execute_ajax_post(data_post);
});

function execute_ajax_post(data_post) {
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    $.ajax({
        url : $('.url-data').val(),
        type : "POST",
        data : data_post,
        success : function() {
            console.log("success");
        },
    });
};

P.s你也可以使用表单操作而不是.url-data输入

编辑：你也可以看看使用formData意味着你甚至不需要获得cookie

调用相同功能的多个表单

1 个答案: