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

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery实现异步获取json数据的2种方式，在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下：

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

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

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

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

  <script src=\"Scripts/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程序设计有一定的借鉴价值。

本文地址：https://www.stayed.cn/item/26093

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案