jQuery ajax读取本地json文件

最新推荐文章于 2024-03-29 23:10:30 发布

weixin_30691871

最新推荐文章于 2024-03-29 23:10:30 发布

阅读量1.3k

点赞数 1

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/renxiuxing/p/9703009.html

版权

jQuery ajax读取本地json文件

ceshi.json

  {
      "first": [
          {
              "name": "张三",
              "sex": "男"
          }, {
              "name": "李思",
              "sex": "女"
          }, {
              "name": "王五",
              "sex": "男"
          }, {
              "name": "赵柳",
              "sex": "女"
          }
              ]
  }

源码：

  <!DOCTYPE html>
  <html>

  <head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/jquery.js"></script>

  <script>
      //方法一
      function ajax_test() {
          $.ajax({
              url: "ceshi.json", //json文件位置
              type: "GET", //请求方式为get
              dataType: "json", //返回数据格式为json
              success: function(data) { //请求成功完成后要执行的方法 
                  alert(data.first[0].name);
                  //each循环 使用$.each方法遍历返回的数据date
                  $.each(data.first, function(i, item) {
                      var str = '<div>姓名:' + item.name + '性别：' + item.sex + '</div>';
                      document.write(str);
                  })
              }
          })
      }
      ajax_test(); //执行函数

      //方法二:
      //jQuery.getJSON()是jQuery.ajax()函数的简写形式.
      // jQuery.getJSON( url [, data ] [, success ] )
      $.getJSON("ceshi.json", "", function(data) {　 //each循环 使用$.each方法遍历返回的数据date
          $.each(data.first, function(i, item) {
              var str = '<br/><div>姓名:' + item.name + '性别：' + item.sex + '</div>';
              document.write(str);
          })
      });
      </script>

      <title>ajax获取json测试</title>
      </head>
      测试
      <body>
      </body>

      </html>

效果

转载于:https://www.cnblogs.com/renxiuxing/p/9703009.html

weixin_30691871

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery ajax读取本地json文件

jQuery ajax读取本地json文件ceshi.json { "first": [ { "name": "张三", "sex": "男" }, { "name": "李思", "sex": "女" },...
复制链接

扫一扫