### 代码逻辑理解
####
HTML 部分
HTML 部分负责构建
页面结构，创建了一个包含表格的
页面，表格中的行数据是通过
PHP 动态生成的。每个表格行都添加了 `draggable` 属性，使其可以被拖动。
```
html
<!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>
```
####
JavaScript 部分
JavaScript 部分实现了表格行的拖放交互逻辑。通过监听 `dragstart`、`dragover` 和 `dragend` 事件，完成了行的拖动、放置和排序操作。
- `dragstart` 事件：记录被拖动的行，设置拖动效果为 `move`，并将被拖动行的
HTML 数据存储在 `dataTransfer` 中，同时隐藏被拖动的行。
- `dragover` 事件：阻止默认行为，设置放置效果为 `move`，根据鼠标位置决定被拖动行的插入位置。
- `dragend` 事件：显示被拖动的行，获取表格中所有行的 `id`，并使用
AJAX 将新的排序顺序发送到服务器。
####
PHP 部分
PHP 部分负责处理
AJAX 请求，并更新数据库中的排序顺序。
```
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);
}
// 获取
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 "排序顺序已更新";
?>
```
### 代码问题与优化
#### 问题
1. **SQL 注入风险**：在
PHP 代码中，直接将变量插入 SQL 语句，存在 SQL 注入风险。
2. **错误处理不足**：
JavaScript 中
AJAX 请求失败时没有进行错误处理，
PHP 代码中更新数据库时也没有详细的错误处理。
3. **兼容性问题**：使用 `XMLHttpRequest` 进行
AJAX 请求，在现代
浏览器中可以使用更简洁的 `fetch` API。
#### 优化建议
1. **防止 SQL 注入**：使用预处理语句来避免 SQL 注入风险。
```
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);
}
$data = js
on_decode(file_get_c
ontents("
php://input"), true);
$ids = $data['ids'];
foreach ($ids as $index => $id) {
$sor
tOrder = $index + 1;
$stmt = $c
onn->prepare("UPDATE your_table SET sort_order = ? WHERE id = ?");
$stmt->bind_param("ii", $sor
tOrder, $id);
$stmt->
execute();
if ($stmt->error) {
error_log("Error updating sort order
: " . $stmt->error);
}
$stmt->close();
}
$c
onn->close();
echo "排序顺序已更新";
?>
```
2. **增强错误处理**：在
JavaScript 中添加
AJAX 请求失败的错误处理。
```
javascript
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);
// 使用 fetch API 发送请求
fetch('update_sort_order.
php', {
method
: 'POST',
headers
: {
'C
ontent-Type'
: 'applicati
on/js
on'
},
body
: JS
ON.stringify({ ids
: ids })
})
.then(resp
onse => {
if (!resp
onse.ok) {
throw new Error('Network resp
onse was not ok');
}
return resp
onse.text();
})
.then(data => {
c
onsole.log(data);
})
.catch(error => {
c
onsole.error('Error
:', error);
});
});
```
### 总结
这段代码通过
HTML、
JavaScript 和
PHP 实现了可拖拽排序表格的功能。通过分析代码逻辑，发现了存在的问题，并提出了相应的优化建议，包括防止 SQL 注入、增强错误处理和使用更现代的 API 等。
本文探讨了Ajax请求中常见的跨域问题，特别是在数据为空时出现的NetworkError错误。通过在PHP文件中添加适当的header设置，成功解决了跨域访问限制，确保了不同浏览器下Ajax请求的正常工作。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
