ajax动态加载内容java示例
时间: 2023-05-30 20:04:51 浏览: 119
实例演示动态加载js文件
5星 · 资源好评率100%
以下是一个简单的Java示例,演示如何使用Ajax动态加载内容:
1. 创建一个名为"index.jsp"的JSP页面,其中包含一个按钮和一个<div>标签:
```
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#loadBtn").click(function(){
$.ajax({
url: "loadContent.jsp",
success: function(result){
$("#content").html(result);
}
});
});
});
</script>
</head>
<body>
<h1>Ajax Example</h1>
<button id="loadBtn">Load Content</button>
<div id="content"></div>
</body>
</html>
```
2. 创建一个名为"loadContent.jsp"的JSP页面,其中包含一些要加载的内容:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div>
<h2>Loaded Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod nibh in suscipit dapibus. Morbi vitae fermentum lorem. Sed vel commodo massa. Nulla facilisi. Nulla tincidunt tortor sit amet nisi laoreet, vitae dapibus elit dictum. Sed sed enim euismod, commodo magna eu, bibendum metus. Mauris euismod, sapien a lacinia commodo, nisl eros egestas sem, nec consectetur eros urna sit amet turpis. Praesent euismod, lectus id hendrerit dictum, tellus neque tincidunt tellus, et commodo ligula ex in urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel velit ac arcu faucibus mollis non a velit. Nam non augue vel nunc ultricies dignissim. Duis euismod nisi nec eros ullamcorper, vel dignissim lorem tincidunt. Nulla facilisi.</p>
</div>
```
3. 运行"index.jsp"页面,单击"Load Content"按钮,将会动态加载"loadContent.jsp"页面中的内容,并显示在<div>标签中。
以上就是一个简单的Java示例,演示如何使用Ajax动态加载内容。这个示例使用了jQuery库来简化Ajax的开发过程。
阅读全文