<?
php
// 假设这里有数据库连接和查询操作
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "h
oneyu";
$c
onn = new mysqli($servername, $username, $password, $dbname);
if ($c
onn->c
onnect_error) {
die("C
onnecti
on failed: " . $c
onn->c
onnect_error);
}
// 获取
AJAX 发送的排序顺序
$data = js
on_decode(file_get_c
ontents("
php://input"), true);
$ids = $data['ids'];
// 更新数据库中的排序顺序
foreach ($ids as $index => $id) {
$sor
tOrder = $index + 1;
$sql = "UPDATE your_table SET sort_order = $sor
tOrder WHERE id = $id";
$c
onn->query($sql);
}
$c
onn->close();
echo "排序顺序已更新";
?>
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" c
ontent="width=device-width, initial-scale=1.0">
<title>可拖拽排序表格</title>
<style>
table {
border-collapse
: collapse;
width
: 100%;
}
th, td {
border
: 1px solid #ddd;
padding
: 8px;
text-align
: left;
}
</style>
</head>
<body>
<table id="sortable-table">
<!-- 这里会通过
PHP 动态生成表格行 -->
<?
php
// 假设这里有数据库连接和查询操作
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$c
onn = new mysqli($servername, $username, $password, $dbname);
if ($c
onn->c
onnect_error) {
die("C
onnecti
on failed: " . $c
onn->c
onnect_error);
}
$sql = "SELECT id, name FROM your_table ORDER BY sort_order";
$result = $c
onn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr draggable='true' data-id='".$row["id"]."'>";
echo "<td>".$row["id"]."</td>";
echo "<td>".$row["name"]."</td>";
echo "</tr>";
}
}
$c
onn->close();
?>
</table>
<script>
c
onst table = document.getElementById('sortable-table');
let draggedRow;
table.addEventListener('dragstart', functi
on(e) {
draggedRow = e.target.closest('tr');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/
html', draggedRow.outer
HTML);
setTimeout(() => {
draggedRow.style.display = 'n
one';
}, 0);
});
table.addEventListener('dragover', functi
on(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
c
onst targetRow = e.target.closest('tr');
if (targetRow && targetRow !== draggedRow) {
c
onst rect = targetRow.getBoundingClientRect();
c
onst middle = rect.
top + rect.height / 2;
if (e.clientY < middle) {
table.insertBefore(draggedRow, targetRow);
} else {
table.insertBefore(draggedRow, targetRow.nextSibling);
}
}
});
table.addEventListener('dragend', functi
on(e) {
draggedRow.style.display = 'table-row';
c
onst rows = Array.from(table.querySelec
torAll('tr'));
c
onst ids = rows.map(row => row.dataset.id);
// 使用
AJAX 将新的排序顺序发送到服务器
c
onst xhr = new XMLHttpRequest();
xhr.open('POST', 'update_sort_order.
php', true);
xhr.setRequestHeader('C
ontent-Type', 'applicati
on/js
on');
xhr.
onreadystatechange = functi
on() {
if (xhr.readyState === 4 && xhr.status === 200) {
c
onsole.log(xhr.resp
onseText);
}
};
xhr.send(JS
ON.stringify({ ids
: ids }));
});
</script>
</body>
</
html>
本文探讨了Ajax请求中常见的跨域问题，特别是在数据为空时出现的NetworkError错误。通过在PHP文件中添加适当的header设置，成功解决了跨域访问限制，确保了不同浏览器下Ajax请求的正常工作。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
