Javascript XMLHttpRequest/AJAX请求以twig for循环发送

我试图用PHP开发一个简单的任务列表。我有一个为每个循环使用细枝的任务列表。如果任务标记为已完成，则选中该复选框。我的问题是如何在每个复选框上附加一个脚本，以使用不同的参数进行ajax调用，以便服务器知道正在检查哪个任务

<table>
    <thead>
        <tr>
            <th>Task</th>
            <th>Valmis</th>
        </tr>
    </thead>
    <tbody>
        {% for task in tasks %}
        <tr>
            <td>{{task.description}}</td>
            <td><input type="checkbox" {{ task.done ? "checked" : "" }} ></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

任务
瓦尔米斯
{tasks%%中任务的%s}
{{task.description}
{%endfor%}

我添加了一个类，用于启用对表单的ajax调用，并通过向服务器发送邮件来实现该类，并管理响应，如以下示例所示：

Javascript代码：

$(document).ready(function() {
            $('.lista-proroghe-item').each(function(){
                $(this).find('.perform-ajax-request-button').click(function(){
                    var form = $(this).closest("form"), action = form.attr('action');
                    var currentButton = $(this);
                    var currentMessage = $(this).next('.proroga-messaggio');

                    $(this).attr('disabled', 'disabled');
                    $(this).html('Processing...');

                    $.ajax({
                        url: action,
                        type: "POST",
                        data: form.serialize(),
                        success: function(data) {
                            // console.log(data);
                            $(currentButton).hide();
                            $(currentMessage).html('<span>'+data.description+'<br>'+data.extendedMessage+'</span>');
                        }
                    });
                    e.preventDefault();
                    return false;
                })
            })
        });

 {%  for extension in assignation.contract.contractModificationDurations  %}
    <li class="lista-proroghe-item">
        <form action="{{ path('contractExtension', {'idContractModification' : extension.idContractModification, 'userid':user.id }) }}">
            Element 
            <button class="button small perform-ajax-request-button right"><span class="refresh">to task</span></button>
            <div class="proroga-messaggio"></div>
        </form>
    </li>        
{% else %}
    <li>
        Nessuna proroga trovata
    </li>
{% endfor %}

$（文档）.ready（函数（）{
$（'.lista proroghe item'）。每个（函数（）{
$（this.find（'.perform ajax request button'）。单击（function（）{
var form=$（this.closest（“form”），action=form.attr（“action”）；
var currentButton=$（此）；
var currentMessage=$（this.next（'.proroga-messaggio'）；
$（this.attr（'disabled'，'disabled'）；
$（this.html（'Processing…'）；
$.ajax({
url:action，
类型：“POST”，
数据：form.serialize（），
成功：功能（数据）{
//控制台日志（数据）；
$（currentButton）.hide（）；
$（currentMessage）.html（“”+data.description+'
'+data.extendedMessage+“”）；
}
});
e、 预防默认值（）；
返回false；
})
})
});

树枝代码：

$(document).ready(function() {
            $('.lista-proroghe-item').each(function(){
                $(this).find('.perform-ajax-request-button').click(function(){
                    var form = $(this).closest("form"), action = form.attr('action');
                    var currentButton = $(this);
                    var currentMessage = $(this).next('.proroga-messaggio');

                    $(this).attr('disabled', 'disabled');
                    $(this).html('Processing...');

                    $.ajax({
                        url: action,
                        type: "POST",
                        data: form.serialize(),
                        success: function(data) {
                            // console.log(data);
                            $(currentButton).hide();
                            $(currentMessage).html('<span>'+data.description+'<br>'+data.extendedMessage+'</span>');
                        }
                    });
                    e.preventDefault();
                    return false;
                })
            })
        });

 {%  for extension in assignation.contract.contractModificationDurations  %}
    <li class="lista-proroghe-item">
        <form action="{{ path('contractExtension', {'idContractModification' : extension.idContractModification, 'userid':user.id }) }}">
            Element 
            <button class="button small perform-ajax-request-button right"><span class="refresh">to task</span></button>
            <div class="proroga-messaggio"></div>
        </form>
    </li>        
{% else %}
    <li>
        Nessuna proroga trovata
    </li>
{% endfor %}

{%用于assignation.contract.contractModificationDurations%中的扩展名]

元素
责难

{%else%}

长尾尼苏纳

{%endfor%}

---

希望有此帮助。

您能为每个任务附加一个id并将其附加到输入中吗。通过这种方式，您将知道单击了哪个任务。嗨@MikkoÖversti您找到解决方案了吗？谢谢您，阿披舍克和@Matteo@MikkoÖversti不客气！如果你觉得它有用的话，考虑一下我的答案吧！