jQuery中讀取json檔案

阿新 • • 發佈：2019-02-01

json檔案是一種輕量級的資料互動格式。一般在jquery中使用getJSON()方法讀取。
$.getJSON(url,[data],[callback])
url：載入的頁面地址
data: 可選項，傳送到伺服器的資料，格式是key/value
callback:可選項，載入成功後執行的回撥函式
1.首先建一個JSON格式的檔案userinfo.json 儲存使用者資訊。如下:

[  
{  
    "name":"張國立",  
    "sex":"男",  
    "email":"[email protected]"  
},  
{  
    "name 
":"張鐵林",  
    "sex":"男",  
    "email":"[email protected]"  
},  
{  
    "name":"鄧婕",  
    "sex":"女",  
    "email":"[email protected]"  
}  
]

其次建一個頁面用於獲取JSON檔案裡的使用者資訊資料，並顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON獲取資料</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
 #divframe{ border:1 
px solid #999; width:500px; margin:0 auto;}
 .loadTitle{ background:#CCC; height:30px;}
</style>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $.getJSON("js/userinfo.json",function(data){
            var $jsontip = $("#jsonTip");
            var strHtml = "123";//儲存資料的變數
            $jsontip.empty();//清空內容
            $.each(data,function(infoIndex,info){
                  strHtml += "姓名："+info["name"]+"<br>";
                  strHtml += "性別："+info["sex"]+"<br>";
                  strHtml += "郵箱："+info["email"]+"<br>";
                  strHtml += "<hr>"
                })
            $jsontip.html(strHtml);//顯示處理後的資料  
            })
        })

    })
</script>
</head>

<body>
<div id="divframe">
  <div class="loadTitle">
    <input type="button" value="獲取資料" id="btn"/>
  </div>
  <div id="jsonTip">
  </div>
</div>
</body>
</html>

jQuery中讀取json檔案

json檔案是一種輕量級的資料互動格式。一般在jquery中使用getJSON()方法讀取。 $.getJSON(url,[data],[callback]) url：載入的頁面地址 data: 可選項，傳送到伺服器的資料，格式是key/value ca

vscode中讀取json檔案settings.json

讀取檔案的內容：讀取檔案的方法： var settingsPath = process.env.AppData + "\\Code\\User\\settings.json"; var allConfigJson = JSON.parse(fs.readFileSync(set

Wex5中讀取json檔案

前言：在Wex5中如何讀取本地json檔案的內容並將它儲存到data元件，並通過繫結事件將內容顯示在頁面上。第一：1、在ui下面建立.json檔案，編輯json格式資料。 2、在.w檔案中新增data元件。在列中新增.json檔案對應的資料。 3、在.w檔案下cont

Android 讀取assets中的Json檔案

//檔名稱 private final static String fileName = "regison.json"; class DataThread extends Thread { @Override public void run() {

flutter讀取專案中的json檔案資料

前言網上有很多讀取的,但對於小白的我來說(剛接觸flutter一週,dart完全不懂),從專案中讀取 xxx.json檔案,並將檔案中的json內容轉換為string物件是困難的,話不多說直接上程式碼環境準備由於我是在自己專案中實現的,有環境,及依賴需要引入,就全部都貼出來

JQuery讀取Json檔案

var resultdata ={ name : null, bg: null, } function initData(){ var dataroot="config.js

使用jQuery讀取json檔案

json檔案是一種輕量級的資料互動格式。一般在jquery中使用getJSON()方法讀取，具體示例程式碼如下 json檔案是一種輕量級的資料互動格式。一般在jquery中使用getJSON()方

eclipse中讀取json配置檔案，相對路徑不能以斜槓打頭。

fileReader = new FileReader("src/json_for_test/netDiagnoseConfigParameter"); BufferedReader bufferedReader = new BufferedReader(fileReader); St

專案中讀取配置檔案的方式（二）

import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** 有時,需要配置檔案,配置檔案中儲存的內容是什麼 ? 儲存屬性儲存一些經常

android中讀取properties檔案

java中經常用到properties檔案，然後通過使用Properties類來解析，這裡不再陳述使用properties檔案的好處，主要探討如何在android中使用properties檔案！方法一：context.getAssets() 因為最終是通過流檔案來進行prop

java讀取json檔案並轉換為String

import java.io.*; public class Output { //測試 public static void main(String[] args){ String json = "null"; try { json = readJsonData("I

關於Python中讀取寫入檔案並進行檔案與使用者互動的操作

一、提前知識點在python中是同樣和其他語言一樣可以進行檔案的讀取寫入操作，值得注意的是，Python中開啟檔案讀取的方式有幾種，分別是以下幾種： 1 f = open('username.txt') 2 first_line = f.readline() 3 print('fi

java中讀取Property檔案屬性工具類

java中讀取Property配置檔案屬性工具類: import java.util.Locale; import java.util.MissingResourceException; import java.util.ResourceBundle; /** * 讀取Property配置檔

C語言讀取JSON檔案

用來讀取json檔案並賦值給物件,使用了cJSON typedef struct { cJSON *url; char path[100]; char app_name[100]; } Enter; int main(){ FILE *

簡單使用Gson解析SDcard中的Json檔案

File file = new File(Environment.getExternalStorageDirectory(),"news.json"); try { FileInputStream fileInputStream = new FileInputStream(file

Python中讀取txt檔案的兩種可行辦法

DataTest.txt中的檔案內容，檔案最後儘量不要留空行，否則有的時候會出現error 1,2,3 4,5,6 7,8,9 第一種方式：使用 csv.reader讀取txt檔案 import csv data = [] with open('E:/DataTest.t

在python中讀取TXT檔案的方法

【時間】2018.11.14 【題目】（轉載）在python中讀取TXT檔案的方法【轉載連結】https://www.cnblogs.com/youyou0/p/8921719.html 一、讀檔案 1.簡單的將檔案讀取到字串中 f = open(

Unity3D中讀取CSV檔案

轉自　　https://www.cnblogs.com/lyh916/p/8588218.html 參考連結： https://www.cnblogs.com/lulianqi/p/6385503.html http://blog.csdn.net/paul342/article/det

C#中讀取EXCEL檔案的第二種方法

using NPOI.HSSF.UserModel; using System; using System.IO; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; namespace ReadExcel { class Program

java 讀取json檔案方法以及操作json物件方法。

1 獲取本地js檔案路徑 Fileuri = ParseTools.class.getClassLoader().getResource("com/zxcl/parsejs/XinZhongChengParse.js").toURI(); 2

jQuery中讀取json檔案

相關推薦