Web实验五Jquery AJAX编程

作者：System 时间：2024年08月08日分类：所有,ajax 字数：1503

以下是一个使用jQuery进行AJAX GET请求的简单示例，它从服务器获取JSON数据并在前端显示：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX GET Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="data-container">数据加载中...</div>
    <button id="load-data">加载数据</button>
 
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 (script.js):




$(document).ready(function() {
    $('#load-data').click(function() {
        $.ajax({
            url: 'https://api.myjson.com/bins/9inum', // 示例API URL
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var html = '<ul>';
                $.each(data, function(key, value) {
                    html += '<li>' + key + ' - ' + value + '</li>';
                });
                html += '</ul>';
                $('#data-container').html(html);
            },
            error: function() {
                alert('数据加载失败！');
            }
        });
    });
});

在这个例子中，当用户点击按钮时，会发起一个AJAX GET请求到指定的URL（这里假设为 'https://api.myjson.com/bins/9inum'），服务器返回的JSON数据会被处理并显示在页面上的\`<div id="data-container">\`元素中。如果请求失败，会弹出错误提示。

Web实验五Jquery AJAX编程

评论已关闭

推荐阅读