使用Ajax将网页中的数字列表发送到服务器可以通过以下步骤实现:
<!DOCTYPE html>
<html>
<head>
<title>发送数字列表到服务器</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul id="number-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button onclick="sendNumberList()">发送列表</button>
<script>
function sendNumberList() {
var numberList = [];
var listItems = document.getElementById("number-list").getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
numberList.push(listItems[i].innerText);
}
$.ajax({
url: "server-url",
type: "POST",
data: JSON.stringify(numberList),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
console.log("列表发送成功");
},
error: function(xhr, status, error) {
console.log("列表发送失败: " + error);
}
});
}
</script>
</body>
</html>
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.post("/receive-number-list", (req, res) => {
const numberList = req.body;
// 在这里对接收到的数字列表进行处理
console.log(numberList);
res.sendStatus(200);
});
app.listen(3000, () => {
console.log("服务器已启动");
});
这样,当用户点击"发送列表"按钮时,前端页面会使用Ajax将数字列表发送到服务器的指定API。服务器端接收到请求后,可以对数字列表进行处理,例如存储到数据库或进行其他操作。
领取专属 10元无门槛券
手把手带您无忧上云