jquery用ajax方式從后臺獲取json數據后如何將內容填充到下拉列表

2019-11-20 11:42:42

字體：大中小

來源：轉載

供稿：網友

對于問題從后臺獲取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;  } }

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

上一篇：jQuery三級下拉列表導航菜單代碼分享

下一篇：js鋼琴按鈕波浪式圖片排列效果代碼分享