php mysql PDO 查詢操作的實例詳解
778
2023-12-08
本文實例講述了jQuery Ajax和getJSON獲取后臺普通json數據和層級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>
<title>Ajax和getJSON獲取后臺普通Json數據和層級Json數據解析</title>
<script src="http://www.gimoo.net/t/1902/JS/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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);
}
);
});
</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") //普通數據
{
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") //層級數據
{
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("語文","80");
dic.Add("數學", "81");
dic.Add("英語", "83");
dic.Add("生物", "89");
dic.Add("化學", "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;
}
}
}
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
