對於問題從後台擷取json資料，將內容填充到下拉式清單，代碼非常簡單，具體過程請看下面代碼。
需求：url:連結 par：ID sel：下拉式清單選取器
//擷取下拉式清單
function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value="' + json[i].Id + '">' + json[i].Name + '</option>') }; $(sel).prepend('<option value="0">請選擇</option>') });}
以上代碼很簡單吧，此問題很easy的解決了。
Jquery 使用Ajax擷取後台返回的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></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', 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) { $("#list").html(''); //eval將字串轉成對象數組 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //數組 $.each(json, function (index, item) { //迴圈擷取資料 var name = json[index].Name; var idnumber = json[index].IdNumber; var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> </head> <body> <ul id="list"> </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.Generic; using Newtonsoft.Json; using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string JsonStr = JsonConvert.SerializeObject(CreateDT()); context.Response.Write(JsonStr); context.Response.End(); } #region 建立測試資料來源 //建立DataTable protected DataTable CreateDT() { DataTable tblDatas = new DataTable("Datas"); //序號列 //tblDatas.Columns.Add("ID", Type.GetType("System.Int32")); //tblDatas.Columns[0].AutoIncrement = true; //tblDatas.Columns[0].AutoIncrementSeed = 1; //tblDatas.Columns[0].AutoIncrementStep = 1; //資料列 tblDatas.Columns.Add("IdNumber", Type.GetType("System.String")); tblDatas.Columns.Add("Name", Type.GetType("System.String")); tblDatas.Columns.Add("BirthDate", Type.GetType("System.String")); tblDatas.Columns.Add("Sex", Type.GetType("System.String")); tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal")); tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal")); //統計列開始 tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus"); //統計列結束 tblDatas.Columns.Add("Address", Type.GetType("System.String")); tblDatas.Columns.Add("PostCode", Type.GetType("System.String")); //設定社會安全號碼碼為主鍵 tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] }; tblDatas.Rows.Add(new object[] { "43100000000000", "張三", "1982", "0", 3000, 1000, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000003", "趙六", "1985", "0", 5000, 1400, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" }); return tblDatas; } #endregion public bool IsReusable { get { return false; } } } <!-- <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', 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) { $("#list").html(''); //eval將字串轉成對象數組 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //數組 $.each(json, function (index, item) { //迴圈擷取資料 var Key = json[index].key; var Info = json[index].info; // var idnumber = json[index].IdNumber; // var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> --> <%@ 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; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Cache.SetNoStore(); string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]"; context.Response.Write(new JavaScriptSerializer().Serialize(data)); } public bool IsReusable { get { return false; } } } <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %> <!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 runat="server"> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> function GetPara(o) { var sortid = $(o).val(); $.ajax({ url: 'GetPara.ashx?type=get&sortid=' + sortid, type: 'GET', dataType: 'json', timeout: 3000, cache: false, beforeSend: LoadFunction, //載入執行方法 error: erryFunction, //錯誤執行方法 success: succFunction //成功執行方法 }) function LoadFunction() { $("#list").html('載入中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); var json = eval(tt); //數組 $.each(json, function (index, item) { //迴圈擷取資料 var Id = json[index].id; var Name = json[index].name; $("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>"); }); } }; function SavePara() { var parameter = {}; $("#list input:text").each(function () { var key = $(this).attr("id"); var value = $(this).val(); parameter[key] = value; }); $.ajax({ url: 'GetPara.ashx?type=save', type: 'POST', dataType: 'json', data: parameter, timeout: 3000, cache: false, beforeSend: LoadFunction, //載入執行方法 error: erryFunction, //錯誤執行方法 success: succFunction //成功執行方法 }) function LoadFunction() { } function erryFunction() { } function succFunction(tt) { } }; </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)"> </asp:DropDownList> <ul id="list"></ul> <input type="button" value="儲存資料" onclick="SavePara()" /> </div> </form> </body> </html> <%@ WebHandler Language="C#" Class="GetPara" %> using System; using System.Web; using System.Data; using System.Collections.Generic; using System.Web.Script.Serialization; public class GetPara : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string SortId = context.Request["sortid"]; string Type = context.Request["type"]; if (Type=="get") { if (!string.IsNullOrEmpty(SortId)) { DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' "); List<Paras> list = new List<Paras>(); for (int i = 0; i < dt.Rows.Count; i++) { Paras a = new Paras(); a.id = dt.Rows[i]["PARAID"].ToString(); a.name = dt.Rows[i]["PARANAME"].ToString(); list.Add(a); } context.Response.Write(new JavaScriptSerializer().Serialize(list)); } } else if (Type == "save") { //還原序列化json System.IO.Stream stream = context.Request.InputStream; System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8")); string sJson = sr.ReadToEnd(); if (sJson.Contains("&")) { string[] sArr = sJson.Split('&'); for (int i = 0; i < sArr.Length; i++) { string[] sArr1 = sArr[i].Split('='); object id = sArr1[0]; object value = sArr1[1]; } } } else { } } public bool IsReusable { get { return false; } } public struct Paras { public string id; public string name; } }
以上就是本文的全部內容，希望大家喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
