要将 JSON 和 AJAX 结合使用，可以通过 AJAX 请求从服务器获取 JSON 数据，并在页面上动态显示该数据。下面是一个简单的示例代码：
- HTML 页面代码：
<!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>
- JavaScript 文件 script.js：
$(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');
}
});
});
});
- JSON 数据文件 data.json：
{
"name": "John",
"age": 30,
"city": "New York"
}
在这个示例中，当用户点击按钮“Get Data”时，会发起一个 AJAX 请求获取 data.json 文件中的 JSON 数据，并将其动态显示在页面上。
请确保您的服务器支持 AJAX 请求，并且 data.json 文件位于正确的路径下。
提供PHP及ThinkPHP框架的定制开发、代码优化，PHP修改、ThinkPHP修改。
邮箱：yvsm@163.com
微信：yvsm316
QQ：316430983
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
