使用jQuery讀取json檔案

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

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

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]" 
} 
]

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TestGetJSON</title> 
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<!--此處需要下載一個JQuery**.js放在相應的資料夾下-->
<style type="text/css"> 
#divframe{ border:1px solid #999; width:500px; margin:0 auto;} 
.loadTitle{ background:#CCC; height:30px;} 
</style> 
<script type="text/javascript"> 
$(function(){

$("#btn").click(function(){

//注意,這裡面的路徑是URL,UAG是在localhost下做的測試.
$.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檔案

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

使用jQuery讀取json檔案

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

jQuery中讀取json檔案

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

java讀取json檔案並轉換為String

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

C語言讀取JSON檔案

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

vscode中讀取json檔案settings.json

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

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

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

Java 自動讀取json檔案轉化為實體類

思路： 1 建立一個輔助類，與json檔案和轉化實體類分別建立對應關係 2 建立輔助類的註解屬性與json檔案屬性對應 3 輔助類欄位屬性與實體類相同具體需求 json檔案 {"Main": {"TestNo": "30103182222","appliName": "大小

[torchtext]如何利用torchtext讀取json檔案並生成batch

設定Field 首先載入torchtext from torchtext import data 設定Field，對輸入文字資料的格式進行"預設定" question = data.Field(sequential=True, fix_length=20,

js 讀取JSON檔案

json檔案路徑：url:'/static/register.json', //取得分類資料 var data1 ; $.ajax({ url:

C++使用jsoncpp讀取json檔案

我用的是VS2015，相關程式碼與資源https://download.csdn.net/download/ll596214569/10870532 首先，建立一個資料夾用來存放整個工程以及jsoncpp的程式碼和json檔案其中jsoncpp-src-0.5.

ResourceUtils無法讀取json檔案

應用場景 springboot maven專案問題在使用spring的 ResourceUtils.getFile(""); 獲取字尾為 json 的檔案時一直提示檔案不存在。覺得很奇怪，換

【node學習】koa2搭建簡單的伺服器，讀取json檔案開啟圖表專案

需求：用koa2搭建一個簡單的伺服器，能夠讀取json檔案開啟echarts圖表專案。我們知道，不能直接開啟圖表檔案，可以使用hbuilder這種自帶內建伺服器的編輯器，或者vscode的live-server外掛開啟。如果不想在電腦上下載很多編輯器，可以手動用node搭建一個。 1.安裝k

PHP讀取Json檔案

1.data.json檔案 { "goods":[ { "type"

大資料實時計算Spark學習筆記（9）—— Spar SQL(1) 讀取 json 檔案

1 Spark SQL 程式設計方式：（1）SQL;(2) DataFrame API scala> case class Customer(id:Int,name:String,age:Int) defined class Customer scala&g

C++ 讀取json檔案內容

int main(int argc, const char* argv[]){//Options opts;//try {//int exitCode = parseCommandLine(argc, argv, &opts);//if (exitCode != 0)

React Native 之讀取JSON 檔案

一：建立json 檔案放在 ./data/目錄下 { "employees": [ { "FamilyName": "張", "giveName": "三", "salar

python讀取json檔案

json檔案如下： [{ “fontFamily”: “微軟雅黑”, “fontSize”: 12, “BaseSettings”:{ “font”:1, “size”:2 } } { “fontFamily”: “微黑”, “fontSize”: 22, “BaseSettings”:{

（org.json.JSONObject類）java使用JSONObject讀取json檔案，出現中文亂碼

出現問題的程式碼 //從json檔案中讀取資料 StringBuffer stringBuffer = new StringBuffer(); try { BufferedReader bufferedReader = new BufferedReader(ne

Unity的Json解析--讀取Json檔案

Unity的Json解析<一>–讀取Json檔案因為需要做一個外部檔案配置，考慮了XML和Json，而5.3版本對Json做了更新，所以就嘗試一下。版本更新的Json部分介紹哦： [Unity5.3版本更新的Json部分 ]

使用jQuery讀取json檔案

相關推薦