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--) {
$(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数据后如何将内容填充到下拉列表的更多相关文章
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表 ...
- jQuery $.ajax跨域-JSONP获取JSON数据(转载)
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 通过ajax和spring 后台传输json数据
在通过ajax从页面向后台传数据的时候,总是返回415(Unsupported media type)错误,后台无法获取数据.如下图所示: 在尝试解决这个问题的时候,我们首先要理解一下概念: @req ...
- 用jQuery的ajax请求一般处理程序返回json数据
1.web页面代码: 注意事项: dataType类型一定要写成json. 2.一般处理程序代码: 注意事项: ContentType类型写成"application/json"或 ...
- 获取json数据后在 地图上打点,根据 json不断移动点的位置
<?php echo <<<_END <!doctype html> <html> <head> <meta charset=&quo ...
- .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据
一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){ DataTable dt = DBhepler.GetDataT ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
随机推荐
- javascript 字符串中单引号和双引号区别
最近在使用JavaScript编程,遇到使用字符串的情况. 以下是一些测试代码: var str = 'This is Jack'; var str2 = "This is Tom" ...
- django 实现linux运维管理平台
概述 使用django实现一个linux运维管理平台,可以实现注册登录,机器管理 ,服务器批量操作,服务器性能监控. 详细 代码下载:http://www.demodashi.com/demo/112 ...
- hdu 4742 Pinball Game 3D(三维LIS&cdq分治&BIT维护最值)
Pinball Game 3D Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 【CentOS6.5】安装nginx报错:No package nginx available. Error: Nothing to do
今天在给centos6.5安装nginx时候,提示报错No package nginx available. Error: Nothing to do, 后来百度一下,说缺少EPEL(epel是社区强 ...
- myeclipse2014安装jad反编译插件
myeclipse上默认不能查看class文件,需要查看的话安装反编译插件 安装步骤: 准备图中框里的两个文件 1. [net.sf.jadclipse_3.3.0.jar]文件拷贝到如下路径([D: ...
- AI:人工智能搜索策略
人工智能搜索策略:
- mysql优化 慢查询(一)
1.显示慢查询的一些参数的命令:show variables like '%slow%';结果如图
- sqlserver学习笔记(五)—— 查询
查询的基本语法结构: select 列名/* from 表名 [where 限制条件] [order by 排序] 1.查询全部的行和列: select * from 表名 2.查询部分行和列:(部分 ...
- 摘:SQL Server数据类型的25种
我们大家都知道数据类弄是数据的一种基本属性,其主要是表示数据在实际操作中所表示信息的类型.任何一种计算机语言都定义了自己的数据类型. 当然,不同的程序语言都具有不同的特点,所定义的SQL Server ...
- Python 算法(2) 哈夫曼编码 Huffman Encoding
这个问题原始是用来实现一个可变长度的编码问题,但可以总结成这样一个问题,假设我们有很多的叶子节点,每个节点都有一个权值w(可以是任何有意义的数值,比如它出现的概率),我们要用这些叶子节点构造一棵树,那 ...