AJAX 02 案例、Bootstrap框架
以下是一个使用AJAX和Bootstrap的简单示例，展示了如何在前端页面使用Bootstrap进行布局，并通过AJAX异步获取并显示数据：
HTML部分（使用Bootstrap进行布局）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Bootstrap 示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$.ajax({
url: "get-data.php", // 假设有一个get-data.php文件用于处理请求
type: "GET",
success: function(data){
$("#myDiv").html(data); // 将获取的数据显示在id为myDiv的元素中
},
error: function(xhr, status, error){
console.error("An error occurred: " + status + "\nError: " + error);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<button id="myButton" class="btn btn-primary">获取数据</button>
<div id="myDiv" class="mt-3">
<!-- 数据将被加载到这里 -->
</div>
</div>
</body>
</html>PHP部分（假设的get-data.php文件）:
<?php
// 这里可以是数据库查询或其他逻辑处理
$data = "这是通过AJAX获取的数据!";
echo $data;
?>在这个例子中，当用户点击按钮时，会通过AJAX异步发送请求到服务器的get-data.php文件，服务器处理完毕后返回数据，然后通过AJAX的success回调函数动态更新页面上ID为myDiv的元素内容。这个过程不会导致页面刷新，从而提供更好的用户体验。
评论已关闭