创建token后,跳转表单至submit,我希望能够不跳转,保持在主页面中,从信息框显示这些通知
时间: 2024-12-12 09:22:21 浏览: 14
在你提到的场景中,如果你希望在创建Token之后不跳转到新的页面,而是直接在当前主页面显示通知,你可以使用前端技术,如JavaScript和HTML的异步能力来实现。这里有一个简单的思路:
1. **表单提交**:
当用户点击"提交"按钮时,不要使用传统的`form`标签的`action`属性来提交表单(这会导致页面刷新),而是使用JavaScript的`event.preventDefault()`阻止默认的表单提交行为,然后执行自定义的逻辑。
```javascript
document.getElementById('submit-button').addEventListener('click', function(e) {
e.preventDefault();
const tokenData = ... // 获取表单数据
// 发送Ajax请求到服务器,创建Token
createToken(tokenData);
});
```
2. **创建Token函数**:
使用JavaScript发起一个AJAX请求(比如使用Fetch API或者jQuery的$.ajax()方法),将表单数据传递给服务器。
```javascript
async function createToken(data) {
try {
const response = await fetch('/api/sell-token', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data),
});
const result = await response.json();
if (result.success) {
showNotification(result.message); // 显示通知
} else {
console.error(result.error);
}
} catch (error) {
console.error(error);
}
}
function showNotification(message) {
// 在这里添加代码来在主页面的信息框或模态框中显示通知
// 可能会涉及到操作DOM元素或使用第三方插件
alert(message);
}
```
这样,当Token创建成功后,通知会在用户浏览器的控制台或者你自定义的消息提示区域显示,而不会导致页面跳转。记得根据实际需求调整`showNotification`函数的具体实现。
阅读全文