上述代码点击‘保存到数据库’按钮无法跳转到save_data.php脚本文件,请修改一下
时间: 2024-11-27 19:21:34 浏览: 0
Matlab_JiaoCheng.rar_matlab jiaocheng_matlabjiaocheng
如果你想要在点击“保存到数据库”按钮时直接在当前页面显示结果而不是跳转到新的页面,你可以在原有的HTML文件中修改`onclick`事件,直接在同一页处理表单提交。下面是修改后的部分:
```html
<!-- 原有的<button onclick="submitData()">保存到数据库</button> -->
<button onclick="event.preventDefault(); submitData()">保存到数据库</button>
```
现在点击按钮会执行`submitData()`函数,但先阻止了默认的表单提交行为(即不会跳转)。以下是完整的`submitData`函数内容,包括前端数据验证和处理:
```javascript
function submitData() {
event.preventDefault(); // 阻止表单默认提交
// 获取表单数据
const formData = new FormData(document.getElementById('myTable'));
// AJAX请求发送数据到 save_data.php
fetch('save_data.php', {
method: 'POST',
body: formData
})
.then((response) => {
if (response.ok) {
// 显示成功消息或者清空表单
alert('数据已保存!');
// 或者清空表单以便用户继续输入
formData.forEach((value, key) => {
document.querySelector(`[name="${key}"]`).value = '';
});
} else {
alert('保存失败,请检查网络连接或稍后再试.');
}
})
.catch((error) => {
console.error('错误:', error);
});
}
```
这样,点击按钮时,页面会在原地显示数据是否保存成功的提示信息。
阅读全文