如何在不刷新页面的情况下使用jQuery提交一个表单或表单的一部分
在这篇文章中,我们将学习如何使用JQuery在不刷新页面的情况下提交一个表单或表单的一部分,并通过实例了解其实现。
如何防止HTML表单的提交?
一般来说,当我们提交一个表单时,我们应该点击一个提交按钮,然后我们的页面将导航到另一个路由,正如表单动作属性中提到的那样,但我们可以在网页的后台进行,而不将网页导航到其他路由。而这可以通过使用event.preventDefault()方法来实现,该方法可以阻止默认事件,不允许它被触发。当我们点击提交按钮时,一个事件被触发,所以我们需要阻止这个事件,因为这个事件是负责把用户带到其他路线。因此,我们必须给表单附加一个onsubmit事件监听器,这样当用户点击提交按钮时,我们就可以通过使用preventDefault方法获得该事件对象并阻止该特定事件触发。在使用event.preventDefault()方法防止事件发生后,我们需要获得表单的值,并向我们想要发布值的那个特定路由发出一个发布请求。
前提条件 。在我们进行之前,需要对HTML、CSS、Javascript和JQuery有基本了解。
步骤:
- 创建一个HTML文件,在javascript代码上方添加jquery库CDN。
- 创建2个输入字段,一个提交按钮,以及一个显示结果的跨度。
- 在表单中添加一个onsubmit监听器,并接受一个只有一个参数的回调。
例子。在这个例子中,我们采取了一个假的发布请求,我们需要发布一些信息,服务器将返回ID作为一个对象。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
color: green;
}
h3 {
text-align: center;
}
input,
span {
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h1 class="container">
GeeksforGeeks
</h1>
<h3>Submitting the form without page refresh</h3>
</div>
<form>
<div class="container">
<input placeholder="Name" type="text" name="Name" />
<input placeholder="Job" type="text" name="job" />
<input type="submit" />
</div>
<span class="container"></span>
</form>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script type="text/javascript">
(document).ready(function() {
('form').on('submit', function(event) {
event.preventDefault();
// It returns a array of object
let userinfo = (this).serializeArray();
let user = {};
userinfo.forEach((value) => {
// Dynamically create an object
user[value.name] = value.value;
});
let url = "https://reqres.in/api/users";
.ajax({
method: "POST",
url: url,
data: user
}).done(function(msg) {
// When the request is successful
('span').text('user is successfully created with Id ' + msg.id);
}).fail(function(err, textstatus, error) {
('span').text(textstatus);
});
});
});
</script>
</body>
</html>
输出: