jQuery ajax讀取本地json文件

時間 2019-11-19

標籤 jquery ajax 讀取本地 json 文件欄目 JQuery 简体版

原文原文鏈接

jQuery ajax讀取本地json文件

ceshi.jsonjavascript

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

源碼：html

<!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>