jQuery的getJSON()方法有什么用？

转载

wx5d4b9c9410b88 2020-01-17 13:03:37 博主文章分类：jQuery

jQuery的getJSON()方法用于通过 HTTP GET 请求从服务器获取JSON编码的数据。下面本篇文章就来给大家介绍一下getJSON()方法，希望对大家有所帮助。原文地址：jQuery的getJSON()方法有什么用？

语法：

$(selector).getJSON(url,data,success(data,status,xhr))

参数：此方法接受上述三个参数

●　url：这是必需的参数；它用于以请求发送到的字符串的形式指定URL。

●　data：它是一个可选参数，用于指定将发送到服务器的数据。

●　callback：它也是一个可选参数，在请求成功时运行。

返回值：返回XMLHttpRequest对象。

下面的例子演示了jQuery中的getJSON()方法：

text.json文件：

{
"name": "Tom",
"age" : "20",
"role": "Engineer"
}

示例：获取JSON文件并显示其内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> jQuery getJSON()方法</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {

				$("button").click(function(event) {
					$.getJSON('test.json', function(emp) {
						$('#demo').html('<p> Name: ' + emp.name + '</p>');
						$('#demo').append('<p>Age : ' + emp.age + '</p>');
						$('#demo').append('<p> Role: ' + emp.role + '</p>');
					});
				});
			});
		</script>
	</head>

	<body>
		<p>点击按钮，获取数据</p>
		<button>获取 JSON 数据</button>
		<p id="demo"></p>

	</body>

</html>

效果图：