对于问题从后台获取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">
<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">
<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数据后如何将内容填充到下拉列表的更多相关文章

  1. jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  2. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  3. 使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

    项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表 ...

  4. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  5. 通过ajax和spring 后台传输json数据

    在通过ajax从页面向后台传数据的时候,总是返回415(Unsupported media type)错误,后台无法获取数据.如下图所示: 在尝试解决这个问题的时候,我们首先要理解一下概念: @req ...

  6. 用jQuery的ajax请求一般处理程序返回json数据

    1.web页面代码: 注意事项: dataType类型一定要写成json. 2.一般处理程序代码: 注意事项: ContentType类型写成"application/json"或 ...

  7. 获取json数据后在 地图上打点，根据 json不断移动点的位置

    <?php echo <<<_END <!doctype html> <html> <head> <meta charset=&quo ...

  8. .net后台获取DataTable数据，转换成json数组后传递到前台，通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  9. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

随机推荐

  1. HDU 1823 Luck and Love 二维线段树（树套树）

    点击打开链接 Luck and Love Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  2. NPN/PNP和N沟道/P沟道负载的接法

    N沟道mos管和p沟道mos管负载的接法不一样,随意接的话导致VGS不满足条件:如下图N沟道接法,下拉电阻R2必须接,否则电路状态不稳定. 三极管原理类似如下图(满足三极管导通条件) NPN型三极管: ...

  3. lintcode---线段树查询||（区间元素个数）

    对于一个数组,我们可以对其建立一棵 线段树, 每个结点存储一个额外的值 count 来代表这个结点所指代的数组区间内的元素个数. (数组中并不一定每个位置上都有元素) 实现一个 query 的方法,该 ...

  4. python 操作redis之——HyperLogLog （八）

    #coding:utf8 import redis # python 操作redis之——HyperLogLog r =redis.Redis(host=") # 1.Pfadd 命令将所有 ...

  5. 连接到 Linux 服务器时首先要运行的 5 个命令

    作为一个系统管理员/SRE 工作 5 年后,我知道当我连接到一台 Linux 服务器时我首先应该做什么.这里有一系列关于服务器你必须了解的信息,以便你可以(在大部分时间里)更好的调试该服务器. 连上 ...

  6. Android批量图片载入经典系列——afinal框架实现图片的异步缓存载入

    一.问题描写叙述 在之前的系列文章中,我们使用了Volley和Xutil框架实现图片的缓存载入,接下来我们再介绍一下afinal 框架的使用. Afinal 是一个android的http框架.sql ...

  7. Linux下使用DD命令测试磁盘读写速度

    dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换,所以可以用来测试硬盘的读写能力~ 几种常见的DD命令,先看一下区别~ dd bs=6 ...

  8. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  9. angular关于表单指令的汇总

  10. iptables安装失败后-------------firewalld回归

    yum install firewalld systemctl stop iptables; systemctl mask iptables; systemctl unmask firewalld s ...