2. 程式人生 > >jQuery AJAX獲取JSON資料解析多種方式示例

jQuery AJAX獲取JSON資料解析多種方式示例

阿新 • • 發佈：2019-01-26
$(function () { //方式一 Ajax方式獲取Json資料 $.ajax({ url: 'jsondata.ashx?type=1', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //載入執行方法
error: erryFunction, //錯誤執行方法 success: succFunction //成功執行方法 }) function LoadFunction() { $("#list").html('載入中...'); } function erryFunction() { alert("error"); } function
succFunction(tt) { var json = eval(tt); //陣列 var tt = ""; $.each(json, function (index) { //迴圈獲取資料 var Id = json[index].id; var Name = json[index].name; var
Age = json[index].age; var Score = json[index].score; tt += Id + "___" + Name + "___" + Age + "___" + Score + "<br>"; }); $("#list").html(''); $("#list").html(tt); } //方式二 Json方式獲取資料 $.getJSON( "jsondata.ashx?type=1", function (data) { //迴圈獲取資料 var tt = ""; $.each(data, function (k, v) { $.each(v, function (kk, vv) { tt += kk + ":" + vv + "___"; }); tt += "<br/>"; }); $("#list2").html(tt); } ); //方式三 Ajax方式獲取Json層級資料 $.ajax({ url: 'jsondata.ashx?type=3', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction1, //載入執行方法 error: erryFunction1, //錯誤執行方法 success: succFunction1 //成功執行方法 }) function LoadFunction1() { $("#list3").html('載入中...'); } function erryFunction1() { alert("error"); } function succFunction1(tt) { var json = eval(tt); //陣列 var tt = ""; $.each(json, function (index) { //迴圈獲取資料 var Id = json[index].id; var Name = json[index].name; var Age = json[index].age; var Score = json[index].score; tt += Id + "___" + Name + "___" + Age + "___"; $.each(Score, function (k, v) { tt += k + ":" + v + "___"; }) tt += "<br/>"; }); $("#list3").html(''); $("#list3").html(tt); } //方式四 Json方式獲取層級資料 $.getJSON( "jsondata.ashx?type=3", function (json) { //迴圈獲取資料 var tt = ""; $.each(json, function (index) { //迴圈獲取資料 var Id = json[index].id; var Name = json[index].name; var Age = json[index].age; var Score = json[index].score; tt += Id + "___" + Name + "___" + Age + "___"; $.each(Score, function (k, v) { tt += k + ":" + v + "___"; }) tt += "<br/>"; }); $("#list4").html(''); $("#list4").html(tt); } ); });

相關推薦

jQuery AJAX獲取JSON資料解析多種方式示例

$(function () { //方式一 Ajax方式獲取Json資料 $.ajax({ url: 'jsondata.ashx?type=1', type:

$.ajax()方法從伺服器獲取json資料幾種方式詳解

一．什麼是json json是一種取代xml的資料結構，和xml相比，它更小巧但描述能力卻很強，網路傳輸資料使用流量更少，速度更快。 json就是一串字串，使用下面的符號標註。 {鍵值對} ： json物件 [{},{},{}] ：json陣列 "" ：雙引號內是屬性或值

利用Ajax獲取JSON資料

JSON物件與JSON字串的相互轉換 //JSON物件 屬性名必須使用雙引號包起來 var obj={"a":1,"b":2}; var ary=[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}]; //JSON字串:將JS

jquery ajax 獲取後臺資料 （純文字）

目的是為了拿到後臺資料（純文字） 通過ajax請求獲取到後臺資料 根據不同的到貨型別獲取 採購單位（後臺資料） 比較重要的是 jauery ajax 的引數用法： dataType 型別：String 預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HT

通過JAVA從高德地圖URL連接獲取json資料 解析並存入資料庫的程式舉例

首先 進入高德開放平臺 按官網教程獲取key 這裡以杭州某區域車站資訊舉例 通過線上解析工具獲取json格式的資料 通過此資料建立實體類 package geturl; import java.util.List; public class JsonBean

jsTree 通過ajax 獲取json資料 載入樹形選單

var ajaxTreeSample = function() { $("#tree_4").jstree({ "core" : { "themes" : { "

Spring 3.2.* MVC通過Ajax獲取JSON資料報406錯誤

Spring 3.2.x通過@ResponseBody標籤返回JSON資料的方法都報406錯： Failed to load resource: the server responded with a status of 406 (Not Acceptable) 以及報錯描述： The resource i

jquery ajax 獲取後臺資料表字段儲存的html程式碼

最近在做一個小東西，需要在前臺把使用者填寫的表單（連同html程式碼）放送到後臺資料庫中的某欄位儲存，方便直接把資料取出來並顯示該表單。 開始的時候,表單資料提交正常，但是經過ajax獲取後返回的資料卻無法被解析。開始還以為是html程式碼儲存到資料庫之後那些個類似這樣的

AngularJS學習筆記（3）——通過Ajax獲取JSON資料

通過Ajax獲取JSON資料 以我之前寫的與使用者互動的動態清單列表為例，使用JSON前todo.html程式碼如下： <!DOCTYPE html> <html ng-app="todoApp"> <head>

jsTree ajax 獲取json資料載入樹

後臺獲取json格式資料。 直接上程式碼。 最後有一張官方ajax獲取tree的說明。 var ajaxTreeSample = function() { $("#t

jquery用ajax方式從後臺獲取json資料後如何將內容填充到下拉列表

從後臺獲取json資料，將內容填充到下拉列表，程式碼非常簡單，具體過程請看下面程式碼。 需求：url:連結     par：ID       sel：下拉列表選擇器 function BuildSelectBox(url, par, sel) { $(sel).emp

Vue.js 通過jQuery ajax獲取資料實現更新後重新渲染頁面

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

原生AJAX 請求JSON資料方式

這裡先給大家一個有實際json資料的連線： https://jsonplaceholder.typicode.com/posts 1.例項化XMLHttpRequest物件 var request; if (window.XMLHttpRequest) { 　　request = new

jquery ajax 獲取txt和html資料

 ajaxTxt.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajaxTxt</title> <script

Java從網路中請求獲取JSon資料以及解析JSON資料----（自創，請註明）

 Json資料是比較常用的資料型別解析，優點就不多說啦。來看看方法： public static JSONObject getJsonObject(String url) { JSONObjec

android客戶端從伺服器端獲取json資料並解析的實現程式碼

package com.nuoter.adapterUntil;    import java.util.HashMap;  import java.util.List;    import android.content.Context;  import android.graphics.Bitmap;

Android手機號碼歸屬地的查詢（使用聚合資料API，獲取JSON資料並解析）

一個簡單的Demo，從聚合資料申請手機號碼歸屬地資料介面 在EditText中輸入待查詢號碼，獲取號碼後 在子執行緒中使用HttpUrlconnection獲取JSON資料，之後進行解析 資料獲取完成後， 在主執行緒中更新UI，顯示獲取的號碼歸屬地資訊 佈局檔案 <

list集合轉為json，前臺ajax獲取時間資料並格式化

1。從資料庫中取得list集合資料後，轉為json，前臺ajax想要獲取其中時間資料時，格式經常為 "time":{"date":26,"day":3,"hours":11,"minutes":30,"month":3,"nanos":0,"seconds

JQuery 獲取JSON資料方法

簡述： 使用jquery從後臺獲取JSON資料，顯示 知識點： 1. 使用了require JS 框架 2. 用Jquery的兩種方法獲取後臺資料 1）ajax 方法，傳回的都是json資料 2）getJSON, 直接封裝了一些引數{command : GetRegsit

ajax獲取json路徑方式

最近在做一個聯動的一二級分類選單的時候，遇到ajax無法獲取到json路徑的問題。 無論怎麼搞都獲取不到。 function loadChildren() { var pid = $("#