jQuery实现异步获取json数据的2种方式

2019-12-25 16:00:29来源：爱站网阅读 ()

在jQuery开发中，我们可以通过不同的方法实现数据的传输，本文是爱站技术频道小编为大家带来的jQuery实现异步获取json数据的2种方式，感兴趣的朋友一起来了解一下吧！

通常来说，jQuery异步获取json数据有2种方式，一个是$.getJSON方法，一个是$.ajax方法。本文就来实现使用这2种方式异步获取json数据，然后追加到页面。

在根目录下创建data.json文件：

{
 "one" : "Hello",
 "two" : "World"
}

一、通过$.getJSON方法获取json数据

 <script src="Scripts/jquery.html" target="_blank">jquery-2.1.1.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $.getJSON('data.json', function(data) {
    var items = [];
    $.each(data, function(key, val) {
     items.push('<li id="' + key + '">' + val + '</li>');
    });
    $('<ul/>', {
     'class': 'list',
     html: items.join('')
    }).appendTo('body');
   });
  });
 </script>

二、通过$.ajax方法获取json数据

 <script src="Scripts/jquery-2.1.1.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(data) {
     var items = [];
     $.each(data, function(key, val) {
      items.push('<li id="' + key + '">' + val + '</li>');
     });
     $('<ul/>', {
      'class': 'list',
      html: items.join('')
     }).appendTo('body');
    },
    statusCode: {
     404: function() {
      alert("没有找到相关文件~~");
     }
    }
   });
  });
 </script>

总结：使用$.getJSON方法和$.ajax方法都能达到相同的效果，但是，如果想对异步获取的过程有更细节的控制，推荐使用$.ajax方法。

以上就是jQuery实现异步获取json数据的2种方式，如果你是一名程序员，相信这些内容一定对你是很有用的，推荐js.aizhan.com可以学习到更多的专业知识。

原文链接:https://js.aizhan.com/develop/JavaScript/10870.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有