下面是关于"jQuery使用getJSON方法获取json数据完整示例"的完整攻略：
1. 简介
在Web开发中，经常需要使用Ajax技术从服务器获取数据并进行显示或其他操作。其中，获取的数据可能是JSON格式的数据，应对这种需求，jQuery提供了一个getJSON()方法来处理JSON数据。
2. getJSON()方法说明
方法语法
$.getJSON(url,[data],[callback])
参数说明
url：必需，表示请求的服务器URL地址。该url可能包含查询字符串（也称为请求参数），用于告诉服务器需要哪些数据。data：可选，用于发送请求的数据，格式为键值对（也称为请求参数）。数据格式可以是json字符串、javascript对象或数组。callback：可选，用于请求成功后执行的回调函数。
方法返回值
无返回值。
3. 快速开始
示例1：获取JSON数据并统计数组中所有数字的和
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getJSON示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.getJSON("data.json", function (data, status) {
if (status === "success") {
var sum = 0;
$.each(data.numbers, function (i, item) {
sum += item;
});
$("#result").text("数组元素总和为：" + sum);
} else {
alert("获取数据失败：" + status);
}
});
});
});
</script>
</head>
<body>
<p><button id="btn">获取JSON数据</button></p>
<div id="result"></div>
</body>
</html>
数据文件data.json内容如下：
{
"numbers": [1, 3, 5, 7, 9]
}
JS代码解析：
- 当页面加载完成后，通过jQuery $()函数将按钮的click事件绑定到获取JSON数据的处理程序中。
- 在click事件处理程序中，使用jQuery的 getJSON()方法获取JSON数据，并在请求返回时执行回调函数。
- 如果获取数据成功，就遍历获取到的数据的数组，累加所有元素的值。最后将结果显示在页面上。
示例2：向服务器提交数据并处理响应
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getJSON示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
var nameVal = $("#name").val();
var ageVal = $("#age").val();
if (nameVal === "" || ageVal === "") {
alert("请输入姓名和年龄。");
} else {
var data = {name: nameVal, age: ageVal};
$.getJSON("submit.php", data, function (response, status) {
if (status === "success") {
$("#result").text(response.msg);
} else {
alert("获取数据失败：" + status);
}
});
}
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="name"></p>
<p>年龄：<input type="text" id="age"></p>
<p><button id="btn">提交</button></p>
<div id="result"></div>
</body>
</html>
PHP代码：
<?php
if (isset($_GET["name"]) && isset($_GET["age"])) {
$name = $_GET["name"];
$age = $_GET["age"];
$result = array("code" => 200, "msg" => "您输入的姓名是：{$name}，年龄是：{$age}。");
} else {
$result = array("code" => -1, "msg" => "参数错误！");
}
echo json_encode($result);
?>
JS代码解析：
- 当页面加载完成后，通过jQuery $()函数将按钮的click事件绑定到提交数据的处理程序中。
- 在click事件处理程序中，获取输入框中的数据，拼接为一个javascript对象，作为数据发送到服务器。
- 在getJson()方法中，第二个参数中传入Data对象，该对象将作为POST请求数据发送到服务器。
- 如果服务器返回成功，则用页面底部的div显示json数据。
PHP代码解析：
- 该文件接收一个name和age参数，用于返回提交的数据。
- 如果Get参数不正确，就返回一个错误提示。
- 如果Get参数正确，就返回提交的数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery使用getJSON方法获取json数据完整示例 - Python技术站
微信扫一扫 
支付宝扫一扫 