页面上的复选框已加载XMLhttpRequest

Checkboxes on page loaded with XMLhttpRequest

本文关键字：加载 XMLhttpRequest 复选框      更新时间：2023-09-26

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

像这样：

 _________________________________ '
|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         | |
|___________________________| /

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

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

我在刷新前检查了它们，当我按下submit时，因为它用post发送的新数据刷新了list.php，复选框重置了，我无法获得选中的复选框。我希望复选框被重置，但只有在我的请求完成后。

有什么想法吗？

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

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

您可以使用JavaScript&jQuery

注意：这段代码是未经测试的，它将为您指明正确的方向，但它可能存在语法错误或与您的代码不匹配。

首先，将AJAX调用切换到jQuery POST方法

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

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

这应该能解决你的问题。如果你让它基于这个语法工作，请告诉我任何错误的地方，这样我就可以编辑我的答案，以便将来有用。

相关文章：