使用getJSON()方法异步加载JSON格式数据

最新推荐文章于 2024-04-21 10:54:42 发布

lucky芬

最新推荐文章于 2024-04-21 10:54:42 发布

阅读量2.4k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/daimomo000/article/details/53924439

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

下面通过一个例子来说明：点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。

index.html页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
	<div id="divtest">
        <div class="title">
            <span class="fl">我最爱的运动</span> 
            <span class="fr">
                <input id="btnShow" type="button" value="加载" />
            </span>
        </div>
        <ul></ul>
    </div>
    <script type="text/javascript">
   	$(function(){
   		$("#btnShow").bind("click",function(){
   			var $this=$(this);
    	  $.getJSON("sport.json",function(data){
          $this.attr("disabled","true");
          $.each(data,function(index,sport){
            $("ul").append("<li>"+sport["name"]+"</li>");
          });
        }) 
   		});
   	});
    </script>
</body>
</html>

sport.json页面：

[{"name":"足球"},{"name":"散步"},{"name":"篮球"},{"name":"乒乓球"},{"name":"骑自行车"}]

在本地服务器运行结果：

lucky芬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参
复制链接

扫一扫