在使用Node.js和AJAX时,如果想要在modal上重置append(),可以按照以下步骤进行操作:
以下是一个示例代码:
前端页面:
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="modalData"></div>
</div>
</div>
<!-- JavaScript代码 -->
<script>
// 当点击模态框关闭按钮时,关闭模态框
$(".close").click(function() {
$("#myModal").hide();
});
// 当点击某个按钮时,发送AJAX请求获取数据并展示在模态框中
$("#getDataBtn").click(function() {
$.ajax({
url: "/getData", // 后端路由地址
type: "GET",
success: function(response) {
// 清空模态框中已有的内容
$("#modalData").empty();
// 将获取到的数据添加到模态框中
response.forEach(function(item) {
$("#modalData").append("<p>" + item + "</p>");
});
// 打开模态框
$("#myModal").show();
}
});
});
</script>
后端服务器:
const express = require("express");
const app = express();
// 处理GET请求,返回需要展示在模态框中的数据
app.get("/getData", function(req, res) {
// 从数据库或其他方式获取数据
const data = ["Data 1", "Data 2", "Data 3"];
// 返回数据
res.json(data);
});
// 启动服务器
app.listen(3000, function() {
console.log("Server is running on port 3000");
});
请注意,以上示例代码仅供参考,具体实现方式可能因项目需求和技术栈而异。在实际开发中,你可能需要根据自己的情况进行适当的调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云