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

2024-09-28 10:25:05

对于问题从后台获取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插件datalist实现很好看的input下拉列表

HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:
jQuery三级下拉列表导航菜单代码分享

本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta
jQuery实现在下拉列表选择时获取json数据的方法

本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e
jquery+css实现下拉列表功能

废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fruit</title> <style type="text/css"> .hide { display: none; } div { float: left; width: 100%; } .selector
jQuery实现输入框下拉列表树插件特效代码分享

本文实例讲述了jQuery实现输入框下拉列表树插件.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码.点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQ
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--
基于$.ajax()方法从服务器获取json数据的几种方式总结

一．什么是json json是一种取代xml的数据结构,和xml相比,它更小巧但描述能力却很强,网络传输数据使用流量更少,速度更快. json就是一串字符串,使用下面的符号标注. {键值对} : json对象 [{},{},{}] :json数组 "" :双引号内是属性或值 : :冒号前为键,后为值(这个值可以是基本数据类型的值,也可以是数组或对象),所以 {"age": 18} 可以理解为是一个包含age为18的json对象,而[{"age":
jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
jQuery使用ajax方法解析返回的json数据功能示例

本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo
ajax请求后台得到json数据后动态生成树形下拉框的方法

如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据.你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用. JQuery获取同域的JSON数据首先引用jQuery库文件: <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js&quo
jQuery通过ajax方法获取json数据不执行success的原因及解决方法

1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法解决方案:使json格式务必符合下述3个标准写法: 1)键名称:用双引号括起: 2)字符串:用双引号括起: 3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success执行error语句执
jquery的ajax和getJson跨域获取json数据的实现方法

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso
jQuery实现异步获取json数据的2种方式

本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 通常来说,jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本文就来实现使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } 一

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

相关推荐

随机推荐