javascript - XMLHttpRequest/AJAX 请求在 twig for 循环中发送

Question

我正在尝试使用 PHP 开发一个简单的任务列表。我有一个使用 twig http://twig.sensiolabs.org/ 的任务列表对于每个循环。如果任务标记为已完成，则选中该复选框。我的问题是如何将脚本附加到每个复选框以使用不同的参数进行 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>

Answer 1

我添加了一个类以启用对表单的 ajax 调用，并通过 POST 将其发送到服务器并管理响应，如下例所示:

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;
                })
            })
        });

Twig 代码:

 {%  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 %}

希望这对您有所帮助。