JavaWeb快速入门--JQuery
在这个例子中，我们将使用jQuery来简化我们的网页中的一些功能。我们将使用jQuery的.ajax()方法来异步获取服务器的数据，而不是使用表单的action属性。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").submit(function(event){
event.preventDefault(); // 阻止表单默认提交行为
$.ajax({
url: "submit.jsp", // 服务器端处理的URL
type: "POST", // 请求类型
data: $(this).serialize(), // 表单数据
success: function(response){
$("#serverResponse").text(response); // 更新页面上的元素
},
error: function(){
alert("An error occurred!");
}
});
});
});
</script>
</head>
<body>
<form id="myForm">
First Name: <input type="text" name="firstName" />
Last Name: <input type="text" name="lastName" />
<input type="submit" value="Submit" />
</form>
<div id="serverResponse">Server Response Will Appear Here</div>
</body>
</html>在这个例子中，我们使用jQuery来处理表单的提交，并且使用.ajax()方法来异步发送请求。我们使用event.preventDefault()来阻止表单的默认提交行为，并使用$(this).serialize()来序列化表单数据。成功获取响应后，我们使用$("#serverResponse").text(response)来更新页面上的元素。如果请求失败，我们使用alert()弹出错误提示。这样，我们就可以使用jQuery来简化和增强我们网页的用户交互功能。
评论已关闭