jQuery.getJSON(url,[data],[callback])，通過 HTTP GET 請求載入 JSON 資料。
參數：
url (String) : 發送請求位址。
data (Map) : (可選)待發送 Key/value 參數。
callback (Function) : (可選)載入成功時回調函數。
例子：
test.htm
<!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></title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function getData(){
$("#list").html("");
$.getJSON("Handler1.ashx",
{name:"test",age:20},
function(data){
$.each(data, function(i) {
$("#list").append("<li>姓名:" + data[i].name + " 性别:" + data[i].sex + " 年齡:" + data[i].age + "</li>")
})
})
}
</script>
</head>
<body>
<input id="Button1" type="button" value="擷取資料" οnclick="getData()" />
<ul id="list"></ul>
</body>
</html>
Handler1.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//string name = context.Request.QueryString["name"];
DataTable dt = CreateDataSource();
StringBuilder data = new StringBuilder();
data.Append(DataTableToJSON(dt, true));
context.Response.Write(data);
}
public bool IsReusable
{
get
{
return false;
}
}
/// <summary>
/// 生成測試資料
/// </summary>
/// <returns></returns>
public System.Data.DataTable CreateDataSource()
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("name", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("sex", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("age", typeof(System.Int32)));
for (int i = 0; i < 8; i++)
{
Random rd = new Random(Environment.TickCount * i);
int r = rd.Next(1, 20);
dr = dt.NewRow();
dr[0] = "無名氏" + i.ToString();
if (r < 11)
dr[1] = "男";
else
dr[1] = "女";
dr[2] = r;
dt.Rows.Add(dr);
}
return dt;
}
其中DataTableToJSON()方法為DataTable解析成JSON，見另一篇文章DataTable解析成JSON方法說明
頁面點選“擷取資料”的某次結果如下：
* 姓名:無名氏0 性别:女 年齡:14
* 姓名:無名氏1 性别:男 年齡:9
* 姓名:無名氏2 性别:男 年齡:4
* 姓名:無名氏3 性别:女 年齡:18
* 姓名:無名氏4 性别:女 年齡:12
* 姓名:無名氏5 性别:男 年齡:7
* 姓名:無名氏6 性别:男 年齡:2
* 姓名:無名氏7 性别:女 年齡:16
![小程式自定義button元件擷取使用者資訊（使用者授權登入）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)