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 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数据后如何将内容填充到下拉列表

最新文章

热门文章