JavaWeb简单实例——Ajax请求
以下是一个使用Ajax发送请求并动态更新页面部分内容的简单示例。
首先，我们需要一个HTML页面，其中包含用于发送Ajax请求的JavaScript代码和用于显示结果的元素：
<!DOCTYPE html>
<html>
<head>
<title>Ajax Request Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#load").click(function(){
$.ajax({
url: "target.jsp", // 请求的服务器端地址
type: "GET", // 请求类型
success: function(data){
// 请求成功后的回调函数
// "data" 是服务器返回的内容
$("#response").html(data);
},
error: function(){
// 请求失败后的回调函数
alert("Error loading data!");
}
});
});
});
</script>
</head>
<body>
<div id="response">
<!-- 这里将显示服务器响应的内容 -->
</div>
<button id="load">Load Data</button>
</body>
</html>然后，我们需要一个服务器端的文件，比如 target.jsp，它将响应Ajax请求：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax Response</title>
</head>
<body>
<!-- 这里可以包含任何你想通过Ajax加载到页面的内容 -->
<p>This data was loaded asynchronously!</p>
</body>
</html>这个简单的例子演示了如何使用jQuery库和Ajax方法从服务器请求数据，并在页面上动态更新内容。当用户点击按钮时，页面会向 target.jsp 发送一个GET请求，并在请求成功后用响应内容更新 div 元素的内容。
评论已关闭