Web前端开发技术（JQuery+Ajax）——第四章 JQuery操作DOM
在Web前端开发中，JQuery是一个非常流行的JavaScript库，它提供了一种简单的方法来操作DOM元素。Ajax则允许我们进行异步的HTTP请求，从而无需刷新页面即可更新数据。
以下是一个使用JQuery和Ajax的例子，它展示了如何在用户点击按钮时，通过Ajax异步获取服务器上的数据，并使用JQuery更新DOM元素的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery操作DOM示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">
<p>点击按钮加载数据</p>
<button id="loadBtn">加载数据</button>
<div id="dataContainer">数据加载中...</div>
</div>
<script>
$(document).ready(function() {
$('#loadBtn').click(function() {
$.ajax({
url: 'get-data.php', // 假设的服务器端脚本，返回数据
type: 'GET',
success: function(data) {
$('#dataContainer').html(data); // 使用JQuery更新DOM元素
},
error: function() {
alert('Error loading data');
}
});
});
});
</script>
</body>
</html>在这个例子中，当用户点击按钮时，JQuery会捕捉到这个点击事件，并执行一个Ajax请求到服务器上的get-data.php脚本。成功获取数据后，JQuery会使用$('#dataContainer').html(data)来更新页面上ID为dataContainer的DOM元素的内容。如果请求失败，会弹出一个错误提示。这个例子展示了JQuery和Ajax的基本用法，并且是构建现代Web应用的重要组成部分。
评论已关闭