jQuery处理json数据返回数组和输出的方法

下面是详细讲解 "jQuery处理json数据返回数组和输出的方法" 的完整攻略。

1. jQuery处理JSON数据

在使用 jQuery 处理 JSON 数据时，我们需要使用 getJSON() 方法。该方法是 jQuery 库的一个快捷方法，它通过 HTTP GET 请求从服务器获取 JSON 数据。该方法的语法格式如下：

$.getJSON(url,data,success)

url：必需。规定将请求发送到哪个 URL。
data：可选。规定连同请求发送的数据。
success：可选。规定当请求成功时运行的函数。

接下来我们通过一个简单的示例说明如何使用该方法来处理返回数组的 JSON 数据。

示例1

<!DOCTYPE html>
<html>
<head>
    <title>jQuery JSON处理返回数组示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h1>jQuery JSON处理返回数组示例</h1>
    <div id="myData"></div>
    <script>
        $.getJSON("data.php", function(data){
            $.each(data, function(key, value){
                $("#myData").append(value+"<br>");
            });
        });
    </script>
</body>
</html>

上述代码中，我们通过 getJSON() 方法调用 data.php 文件，获取到一个数组类型的 JSON 数据，然后通过 jQuery 的 $.each() 方法遍历该数组，将数据依次展示在 HTML 页面中。

2. jQuery输出JSON数据

当我们需要将 JSON 数据动态展示到 HTML 页面上时，我们在 jQuery 中使用 $.each() 方法。该方法能够循环遍历一个数组或一个对象的每个元素，然后对每个元素执行指定操作。该方法的语法如下：

$.each(array, function(index, value){ })

array：必需。要遍历的数组或对象。
function(index, value)：必需。为每个匹配元素执行的函数。回调函数的第一个参数表示数组或对象中当前元素的序号，第二个参数表示该元素的值。

接下来，我们通过一个简单的示例来演示如何输出 JSON 数据的方法。

示例2

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 利用 each() 方法输出JSON数据示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h1>jQuery 利用 each() 方法输出JSON数据示例</h1>
    <div id="myData"></div>
    <script>
        var json = [
            {"name":"小明", "age":18},
            {"name":"小红", "age":20},
            {"name":"小刚", "age":22}
        ];
        $.each(json, function(index, value){
            $("#myData").append("姓名："+value.name+"，年龄："+value.age+"<br>");
        });
    </script>
</body>
</html>

上述代码中，我们定义了一个 JSON 数组类型的变量 json，并利用 each() 方法将该数组中的每个对象的 name 和 age 属性输出。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery处理json数据返回数组和输出的方法 - Python技术站

jQuery处理json数据返回数组和输出的方法

1. jQuery处理JSON数据

示例1

2. jQuery输出JSON数据

示例2

相关文章