我正在使用基本的 HTML/CSS 前端，目前有一个登陆页面，上面有一个表单，可将一些数据发送到数据库。当请求完成后，它期待某种响应。在这种情况下，我正在重新渲染页面，但是，我想用某种感谢消息替换表单，以便用户知道它已正确发送。我尝试过简单地创建一个几乎相同的单独页面，并删除和替换表单的解决方案，但是，这种代码克隆似乎是一种低效的方法。有没有办法可以在我的节点应用程序中进行某种前端 DOM 操作？
一般来说，如果你想操纵 DOM 在服务器端的外观，你需要在服务器端渲染整个页面，然后将其发送到前端。
如果你想在前端收到请求后简单地操作 DOM，这是此类内容的常见做法；无论使用何种后端语言，您都可以：
- 提交表格
- 让用户知道表单正在提交到服务器（用户体验的最佳实践）
- Once you receive your response, manipulate the DOM however you would like
- 对于这个用例，我利用了 async/await 语法模式，它允许您等待响应，而不会以嵌套回调模式结束。
附加的片段将通过设置的超时值向服务器伪造请求，并将您输入表单的内容回显到页面。它有三秒的延迟并使用 AJAX 来发出请求。
*您可以通过删除一些日志记录和注释来简化此代码，但出于学习目的，我已将其变得比必要的更加冗长。
**我特意将提交按钮放在表单元素之外，以便它不会在提交时自动发布。如果你想以这种方式提交，你可以在函数中使用 event.preventDefault() ，在事件冒泡之前捕获事件，然后执行此操作。无论哪种方式都会很好地工作。
async function getDataAsync0(data) {
return new Promise(async (res) => {
setTimeout(()=>{
res(data);
},3000)
});
}
$(`#submitButton`).click(async () => {
// Create div to display what's going on
let statusAreaElement = $(`#statusArea`);
// Submit Event
statusAreaElement.html(`Submitted... Waiting for response...`);
// Cache input element
let inputElement = $(`#input01`);
// Cache form element
let formWrapperElement = $(`#formWrapper`);
// Cache success message div
let successMessageElement = $(`#successMessage`);
// Get value
let value = inputElement.val();
// Send value, await response;
let response = await getDataAsync0(value);
statusAreaElement.html(`Response returned -> ${response}`)
// Clear input element
inputElement.val(``);
// Hide form, show success message
formWrapperElement.hide();
successMessageElement.show();
})
#statusArea {
position: absolute;
left: 0;
bottom: 0;
}
#successMessage {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formWrapper">
<form>
<label for="input01">Form Input</label>
<input id="input01" type="text">
</form>
<button id="submitButton">
Submit Form
</button>
</div>
<div id="successMessage">
Thanks for your submission!
</div>
<div id="statusArea">
</div>
JSFiddle 提供了回显服务，因此我也将相同的代码写入了小提琴中，这样您就可以看到它实际上调用了服务器并回显了响应。
这是该链接：https://jsfiddle.net/stickmanray/ug3mvjq0/37/ https://jsfiddle.net/stickmanray/ug3mvjq0/37/
此代码模式应该是您尝试执行的操作所需的全部内容。同样，此请求也是通过 AJAX 进行的，因此 DOM 不需要完全重新加载；如果您实际上要向服务器发送常规帖子（不使用 AJAX），然后重新加载页面，您可以做同样的事情 - 或者简单地构造您想要发送给服务器端的新页面，然后重定向它们从那里。
我希望这有帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
