本文實(shí)例講述了jQuery Ajax和getJSON獲取后臺(tái)普通json數(shù)據(jù)和層級(jí)json數(shù)據(jù)用法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
代碼如下:
<!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>
<title>Ajax和getJSON獲取后臺(tái)普通Json數(shù)據(jù)和層級(jí)Json數(shù)據(jù)解析</title>
<script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//方式一 Ajax方式獲取Json數(shù)據(jù)
$.ajax({
url: 'jsondata.ashx?type=1',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加載執(zhí)行方法
error: erryFunction, //錯(cuò)誤執(zhí)行方法
success: succFunction //成功執(zhí)行方法
})
function LoadFunction() {
$("#list").html('加載中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
var json = eval(tt); //數(shù)組
var tt = "";
$.each(json, function (index) {
//循環(huán)獲取數(shù)據(jù)
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方式獲取數(shù)據(jù)
$.getJSON(
"jsondata.ashx?type=1",
function (data) {
//循環(huán)獲取數(shù)據(jù)
var tt = "";
$.each(data, function (k, v) {
$.each(v, function (kk, vv) {
tt += kk + ":" + vv + "___";
});
tt += "<br/>";
});
$("#list2").html(tt);
}
);
//方式三 Ajax方式獲取Json層級(jí)數(shù)據(jù)
$.ajax({
url: 'jsondata.ashx?type=3',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction1, //加載執(zhí)行方法
error: erryFunction1, //錯(cuò)誤執(zhí)行方法
success: succFunction1 //成功執(zhí)行方法
})
function LoadFunction1() {
$("#list3").html('加載中...');
}
function erryFunction1() {
alert("error");
}
function succFunction1(tt) {
var json = eval(tt); //數(shù)組
var tt = "";
$.each(json, function (index) {
//循環(huán)獲取數(shù)據(jù)
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方式獲取層級(jí)數(shù)據(jù)
$.getJSON(
"jsondata.ashx?type=3",
function (json) {
//循環(huán)獲取數(shù)據(jù)
var tt = "";
$.each(json, function (index) {
//循環(huán)獲取數(shù)據(jù)
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);
}
);
});
</script>
</head>
<body>
<p>方式一</p>
<ul id="list">
</ul>
____________________________________
<p>方式二</p>
<ul id="list2">
</ul>
____________________________________
<p>方式三</p>
<ul id="list3">
</ul>
____________________________________
<p>方式四</p>
<ul id="list4">
</ul>
</body>
</html>
代碼如下:
<%@ WebHandler Language="C#" Class="jsondata" %>
using System;
using System.Web;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using Newtonsoft.Json;
public class jsondata : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Cache.SetNoStore();
string type = context.Request["type"];
if (type=="1") //普通數(shù)據(jù)
{
List<Dictionary<String, String>> aa = new List<Dictionary<string, string>>();
for (int i = 0; i < 6; i++)
{
Dictionary<String, String> aaa = new Dictionary<string, string>();
aaa.Add("id", "no" + i);
aaa.Add("name", "張三" + i);
aaa.Add("age", "21");
aaa.Add("score", "1001");
aa.Add(aaa);
}
string json = JsonConvert.SerializeObject(aa, Formatting.Indented);
context.Response.Write(json);
}
if (type == "3") //層級(jí)數(shù)據(jù)
{
List<Student> list = new List<Student>();
for (int i = 0; i < 6; i++)
{
Student a = new Student();
a.id = "no" + i;
a.name = "張三" + i;
a.age = "21";
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("語(yǔ)文","80");
dic.Add("數(shù)學(xué)", "81");
dic.Add("英語(yǔ)", "83");
dic.Add("生物", "89");
dic.Add("化學(xué)", "90");
dic.Add("物理", "95");
a.score = dic;
list.Add(a);
}
string json = JsonConvert.SerializeObject(list, Formatting.Indented);
context.Response.Write(json);
}
}
public struct Student
{
public string id;
public string name;
public string age;
public Dictionary<string,string> score;
}
public bool IsReusable
{
get
{
return false;
}
}
}
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。