jQuery异步获取json数据方法汇总

标签:游戏玩法    日期:2017-12-28 10:50    录入:汇盛国际平台    浏览:

  

[jQuery,异步,json]jQuery异步获取json数据方法汇总

  

jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据,然后追加到页面。

  

  

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

  

代码如下:

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

  

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

  

代码如下:

  
  
  
  $(function() {  
  $.getJSON('data.json', function(data) {  
  var items = [];  
  $.each(data, function(key, val) {  
  items.push('
  • ' + val + '
  • ');  
      });  
      $('
      ', {  
        'class': 'list',  
        html: items.join('')  
        }).appendTo('body');  
        });  
        });  
        
        
      

      

      

      

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

      

    代码如下:

      
      
      
      $(function() {  
      $.ajax({  
      url: 'data.json',  
      dataType: 'json',  
      success: function(data) {  
      var items = [];  
      $.each(data, function(key, val) {  
      items.push('
  • ' + val + '
  • ');  
      });  
      $('
      ', {  
        'class': 'list',  
        html: items.join('')  
        }).appendTo('body');  
        },  
        statusCode: {  
        404: function() {  
        alert("没有找到相关文件~~");  
        }  
        }  
        });  
        });  
        
        
      

      

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

    ★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
    上一篇:JavaScript设计模式之外观模式实例
    下一篇:js实现文本框宽度自适应文本宽度的方法
    相关文章阅读
    点击右上角的分享按钮即可收藏汇盛国际平台注册 随时随地与好友一起分享精彩内容噢
    最近更新
    热门排行