jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表

2022-05-17 14:37 更新

本文提供的代碼用于從后臺(tái)獲取JSON數(shù)據(jù)，并將內(nèi)容填充到下拉列表中，詳細(xì)的操作過(guò)程如下所示：

需求：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">請(qǐng)選擇</option>')
 });
}

以上代碼很簡(jiǎn)單吧，此問(wèn)題很easy的解決了。


Jquery使用Ajax獲取后臺(tái)返回的Json數(shù)據(jù)頁(yè)面處理過(guò)程

具體實(shí)現(xiàn)過(guò)程請(qǐng)看下面代碼示例：

<!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, //加載執(zhí)行方法 
    error: erryFunction, //錯(cuò)誤執(zhí)行方法 
    success: succFunction //成功執(zhí)行方法 
   }) 
   function LoadFunction() { 
    $("#list").html('加載中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    //eval將字符串轉(zhuǎn)成對(duì)象數(shù)組 
    //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); //數(shù)組   
    $.each(json, function (index, item) { 
     //循環(huán)獲取數(shù)據(jù) 
     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 創(chuàng)建測(cè)試數(shù)據(jù)源 
 //創(chuàng)建DataTable 
 protected DataTable CreateDT() 
 { 
  DataTable tblDatas = new DataTable("Datas"); 
  //序號(hào)列 
  //tblDatas.Columns.Add("ID", Type.GetType("System.Int32")); 
  //tblDatas.Columns[0].AutoIncrement = true; 
  //tblDatas.Columns[0].AutoIncrementSeed = 1; 
  //tblDatas.Columns[0].AutoIncrementStep = 1; 
  //數(shù)據(jù)列 
  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")); 
  //統(tǒng)計(jì)列開(kāi)始 
  tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus"); 
  //統(tǒng)計(jì)列結(jié)束 
  tblDatas.Columns.Add("Address", Type.GetType("System.String")); 
  tblDatas.Columns.Add("PostCode", Type.GetType("System.String")); 
  //設(shè)置身份證號(hào)碼為主鍵 
  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, //加載執(zhí)行方法 
    error: erryFunction, //錯(cuò)誤執(zhí)行方法 
    success: succFunction //成功執(zhí)行方法 
   }) 
   function LoadFunction() { 
    $("#list").html('加載中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    //eval將字符串轉(zhuǎn)成對(duì)象數(shù)組 
    //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); //數(shù)組   
    $.each(json, function (index, item) { 
     //循環(huán)獲取數(shù)據(jù) 
     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, //加載執(zhí)行方法  
    error: erryFunction, //錯(cuò)誤執(zhí)行方法  
    success: succFunction //成功執(zhí)行方法  
   }) 
   function LoadFunction() { 
    $("#list").html('加載中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    var json = eval(tt); //數(shù)組 
    $.each(json, function (index, item) { 
     //循環(huán)獲取數(shù)據(jù)  
     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, //加載執(zhí)行方法  
    error: erryFunction, //錯(cuò)誤執(zhí)行方法  
    success: succFunction //成功執(zhí)行方法  
   }) 
   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="保存數(shù)據(jù)" 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; 
 } 

}
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)