首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 26, 2015

对于问题从后台获取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用ajax方式从后台获取json数据后如何将内容填充到下拉列表

- Author -

随缘py

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 #Javascript
javascript中alert()与console.log()的区别
Aug 26 #Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 #Javascript
基于jQuery实现的QQ表情插件
Aug 25 #Javascript
js中javascript:void(0) 真正含义
Nov 05 #Javascript
js实现三张图（文）片一起切换的banner焦点图
Aug 25 #Javascript
js焦点文字滚动效果代码分享
Aug 25 #Javascript
redis shake(1) 分析统计(1) matplotlib(7) 条形图(1) 排名(1) 数据同步(1) 窗口函数(3) ipyvizzu(1) 阿里云(6) 速龙(1)
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
提升PHP执行速度全攻略
2006/10/09 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
NBA欧洲商店(法国)：NBA Europe Store FR
2016/10/19 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
考核评语大全
2014/04/29 职场文书
租房协议书样本
2014/08/20 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python