在我的主页上,我有一个带有票证状态选项的选择,以及一个提交按钮和一个文本区域。我有一个门票列表,每张门票都有一个复选框,列表上显示有关门票的各种信息。
像这样:
_________________________________ \
|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 > 列表.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);
});
这应该可以解决您的问题。如果您根据此语法使其正常工作,请告诉我任何错误,以便我可以编辑我的答案以供将来使用。
关于php - 使用 XMLhttpRequest 加载的页面上的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18126778/