载入XMLhttpRequest的页面上的复选框

Question

在我的主页上，我有一个带有票证状态选项的选择，以及一个提交按钮和一个文本区域。 我有一个票证列表，其中每个票证都有一个复选框，并且列表上显示了有关票证的各种信息。

像这样：

 _________________________________ \
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |--> this is on my list.php page
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|________________________________| |
 ___________________________       /
|select status|submit button| \
|___________________________| |
 ___________________________  |--> this is on my main page
|         text area         | |
|___________________________| /

票证列表通过XMLhttpRequest使用“ list.php”加载。 当我输入文本时，然后选择一个状态，检查我要更新的票证，然后按提交，它将通过POST XMLhttpRequest发送信息并刷新页面。

我的XMLhttpRequest将文本区域，状态和提交从我的主页发送到list.php。 问题是复选框-由于它们位于页面list.php上，所以我不知道如何处理它们。

我在刷新之前检查它们，并在按下提交时进行检查，因为它会刷新list.php并随发布后发送新数据，而复选框会重置，而我无法得到选中的复选框。 我希望复选框可以重置，但仅在我的请求完成后才能重置。

有任何想法吗？

我在Pastebin上发布了我的两个页面的简化示例：

• http://pastebin.com/dy9k3u8T > main.php
• http://pastebin.com/icxgbham > list.php

Answer 1

您可以使用JavaScript和jQuery完成所需的一切

注意：此代码未经测试，将在正确的方向提示您，但可能有语法错误或与代码不符。

首先，将您的AJAX调用交换到jQuery POST方法

您已经在简化页面中包含了jQuery，因此，当您可以使用简单的jQuery来执行POST请求时，不要使用那些回旋的XMLHttpRequests（通常，您会在较少的行上执行此操作，但是我将其间隔开了，这样更容易读书）：

function reloadList(statuses) {
    $.post(
        'list.php',
        {
           'data': some-variable,
           'more-data': some-other-variable 
        },
        function(data,status) {
           $('#list').html(data);
           restoreCheckedStatus(statuses);
        }
    );
}

您将需要填写POST数据。

接下来，我们需要一个函数来保存这些复选框的状态

使用jQuery选择器，我们将遍历页面上的每个复选框，并将是否选中它存储在数组中：

function saveCheckedStatus() {
    var statuses = new Array();
    $(':checkbox').each(function(){
        // Store the checkbox ID and checked status in an array
        var cbox = new Array();
        var cbox['id'] = $(this).attr('id');
        var cbox['checked'] = $(this).is(':checked');
        statuses.push(cbox);
    });
    return statuses;
}

我们还需要一个功能来还原这些状态

之后，我们将创建一个函数来从输入数组中还原这些状态：

function restoreCheckedStatus(statuses) {
    for(var cbox in statuses) {
        // Set a checkbox checked or unchecked based on ID
        $('#'+cbox['id']).attr('checked', cbox['checked']);
    }
}

最后，把它们放在一起

现在，我们需要等待某人单击“提交”按钮，然后以正确的顺序执行上述所有操作：

$('#submit').click(function(){
    var statuses = saveCheckedStatus();
    reloadList(statuses);
});

这应该可以解决您的问题。 如果您根据此语法使用它，请让我知道任何错误，以便我编辑答案以供将来使用。