html里form表单提交会跳转页面,如何阻止跳转?
时间: 2023-05-29 15:03:03 浏览: 1321
可以通过以下两种方式阻止表单提交时页面的跳转:
1. 使用JavaScript阻止表单提交时的跳转:
在form表单中通过onsubmit事件来绑定一个JavaScript函数,在该函数中使用preventDefault()方法阻止表单提交时的跳转,如下所示:
```
<form onsubmit="submitForm(event)">
<!-- 表单元素 -->
</form>
<script>
function submitForm(event) {
event.preventDefault(); // 阻止表单提交时的跳转
// 处理表单数据的代码
}
</script>
```
2. 将表单提交方式改为ajax方式,使用ajax提交表单数据,不会引起页面的跳转。可以使用jQuery或者原生的XMLHttpRequest对象来实现ajax提交表单数据,如下所示:
```
<form id="myForm">
<!-- 表单元素 -->
</form>
<script>
$('#myForm').submit(function(event) {
event.preventDefault(); // 阻止表单提交时的跳转
$.ajax({
type: 'POST', // 表单提交方式
url: 'submit.php', // 表单提交的地址
data: $('#myForm').serialize(), // 表单数据
success: function(data) {
// 处理表单提交成功后的结果
},
error: function() {
// 处理表单提交失败后的结果
}
});
});
</script>
```
阅读全文