jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取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 创建测试数据源//创建DataTableprotected 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;}#endregionpublic 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"） {//反序列化jsonSystem.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;} }

以上就是本文的全部内容，希望大家喜欢。