JSON 教程
- 第1节:JSON 简介
- 第2节:JSON 语法
- 第3节:JSON 使用
- 第4节:JSONP 教程
- 第5节:JSON 数据类型
- 第6节:JSON 对象
- 第7节:JSON 模式
- 第8节:JSON 与 XML 对比
- 第9节:JSON 基础结构
- 第10节:JSON 数据格式
- 第11节:JSON 数据解析的方法
- 第12节:JSON 数据解析过程详解
- 第13节:JSON 解析URL参数
- 第14节:JSON 元素的添加删除
- 第15节:JSON 数据解析的3种方式
- 第16节:JavaScript 解析Json字符串的性能比较分析代码
- 第17节:JavaScript解析json格式数据简单示例
- 第18节:JSON数据遍历之for-in
- 第19节:jQuery 遍历Json的实现代码
- 第20节:JS遍历Json字符串
- 第21节:直接在JS里创建JSON数据然后遍历使用
- 第22节:JS循环遍历JSON数据的方法
- 第23节:js 遍历json返回的map内容示例代码
- 第24节:JSP+jquery使用ajax方式调用json的实现方法
- 第25节:jquery中的ajax方法怎样通过JSONP进行远程调用
- 第26节:jquery ajax jsonp跨域调用实例代码
- 第27节:jQuery插件jQuery-JSONP开发ajax调用使用注意事项
- 第28节:json的键名为数字时的调用方式
- 第29节:php跨域调用json的例子
- 第30节:jquery中ajax调用json数据的使用说明
- 第31节:ASP.NET(AJAX+JSON)实现对象调用
- 第32节:JavaScript转换与解析JSON方法实例详解
- 第33节:将JavaScript的jQuery库中表单转化为JSON对象的方法
- 第34节:javascript中JSON对象与JSON字符串相互转换实例
- 第35节:JavaScript中字符串(string)转json的方法
- 第36节:JavaScript将XML转成JSON的方法
- 第37节:java与javascript之间json格式数据互转介绍
- 第38节:转义字符(\)对JavaScript中JSON.parse的影响概述
- 第39节:JavaScript中json对象和string对象之间相互转化
- 第40节:javascript中将Object转换为String函数代码 (json str)
- 第41节:转换json格式的日期为Javascript对象的函数
- 第42节:AJAX跨域请求获取JSON数据
- 第43节:JS根据key值获取URL中的参数值
- 第44节:jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- 第45节:js获取json元素数量的方法
- 第46节:JSONP获取Twitter和Facebook文章数的具体步骤
- 第47节:js获取通过ajax返回的map型的JSONArray的方法
- 第48节:JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
- 第49节:jQuery中使用Ajax获取JSON格式数据示例代码
- 第50节:JQuery 获取json数据$.getJSON方法的实例代码
- 第51节:javascript中JSON对象与JSON字符串相互转换实例
- 第52节:JavaScript中字符串(string)转json的方法
- 第53节:IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
- 第54节:使用JavaScript构建JSON格式字符串实现步骤
- 第55节:JavaScript 解析Json字符串的性能比较分析代码
- 第56节:javascript巧用eval函数组装表单输入项为json对象的方法
- 第57节:用javascript对一个json数组深度赋值示例
- 第58节:解析javascript 数组(以及json元素的添加删除)
- 第59节:js数组如何添加json数据
- 第60节:js/jquery解析json和数组格式的方法详解
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">
<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>
</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 runat="server">
<div>
<asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">
</asp:DropDownList>
<ul></ul>
<input type="button" value="保存数据" />
</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;
}
}