1

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

像这样：

 _________________________________ \
|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 将 textarea、状态和从我的主页提交到 list.php。问题是复选框 - 因为它们在页面 list.php 上，我不知道如何处理它们。

我在刷新之前检查它们，当我按下提交时，因为它刷新了 list.php 与发送的新数据后复选框重置，我无法得到被选中的那个。我希望在我的请求完成后重置复选框。

有任何想法吗？

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

4

1 回答 1

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

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

于 2013-08-08T14:19:17.437 回答