要將 JSON 和 AJAX 結合使用，可以通過 AJAX 請求從服務器獲取 JSON 數據，并在頁面上動態顯示該數據。下面是一個簡單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>JSON and AJAX Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>JSON and AJAX Example</h1>
<button id="getDataBtn">Get Data</button>
<div id="dataContainer"></div>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function() {
$('#getDataBtn').click(function() {
$.ajax({
url: 'data.json',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#dataContainer').empty();
$.each(data, function(key, value) {
$('#dataContainer').append('<p>' + key + ': ' + value + '</p>');
});
},
error: function() {
alert('Error loading data');
}
});
});
});
{
"name": "John",
"age": 30,
"city": "New York"
}
在這個示例中，當用戶點擊按鈕“Get Data”時，會發起一個 AJAX 請求獲取 data.json 文件中的 JSON 數據，并將其動態顯示在頁面上。
請確保您的服務器支持 AJAX 請求，并且 data.json 文件位于正確的路徑下。
