jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据，将内容填充到下拉列表，代码非常简单，具体过程请看下面代码。
需求：url:链接 par：ID sel：下拉列表选择器
//获取下拉列表
functionBuildSelectBox(url,par,sel){
$(sel).empty();
$.getJSON(url,{id:par},function(json,textStatus){
for(vari=json.length-1;i>=0;i--){
$(sel).prepend('<optionvalue="'+json[i].Id+'">'+json[i].Name+'</option>')
};
$(sel).prepend('<optionvalue="0">请选择</option>')
});
}
以上代码很简单吧，此问题很easy的解决了。
Jquery使用Ajax获取后台返回的Json数据页面处理过程
具体实现过程请看下面代码示例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scriptsrc="JS/jquery-1.8.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$.ajax({
url:'jsondata.ashx',
type:'GET',
dataType:'json',
timeout:1000,
cache:false,
beforeSend:LoadFunction,//加载执行方法
error:erryFunction,//错误执行方法
success:succFunction//成功执行方法
})
functionLoadFunction(){
$("#list").html('加载中...');
}
functionerryFunction(){
alert("error");
}
functionsuccFunction(tt){
$("#list").html('');
//eval将字符串转成对象数组
//varjson={"id":"10086","uname":"zhangsan","email":"zhangsan@qq.com"};
//json=eval(json);
//alert("===json:id="+json.id+",uname="+json.uname+",email="+json.email);
varjson=eval(tt);//数组
$.each(json,function(index,item){
//循环获取数据
varname=json[index].Name;
varidnumber=json[index].IdNumber;
varsex=json[index].Sex;
$("#list").html($("#list").html()+"<br>"+name+"-"+idnumber+"-"+sex+"<br/>");
});
}
});
</script>
</head>
<body>
<ulid="list">
</ul>
</body>
</html>
<%@WebHandlerLanguage="C#"Class="jsondata"%>
usingSystem;
usingSystem.Web;
usingSystem.Web.Script.Serialization;
usingSystem.IO;
usingSystem.Text;
usingSystem.Collections.Generic;
usingNewtonsoft.Json;
usingSystem.Data;
publicclassjsondata:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringJsonStr=JsonConvert.SerializeObject(CreateDT());
context.Response.Write(JsonStr);
context.Response.End();
}
#region创建测试数据源
//创建DataTable
protectedDataTableCreateDT()
{
DataTabletblDatas=newDataTable("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=newDataColumn[]{tblDatas.Columns["IdNumber"]};
tblDatas.Rows.Add(newobject[]{"43100000000000","张三","1982","0",3000,1000,null,"深圳市","518000"});
tblDatas.Rows.Add(newobject[]{"43100000000001","李四","1983","1",3500,1200,null,"深圳市","518000"});
tblDatas.Rows.Add(newobject[]{"43100000000002","王五","1984","1",4000,1300,null,"深圳市","518000"});
tblDatas.Rows.Add(newobject[]{"43100000000003","赵六","1985","0",5000,1400,null,"深圳市","518000"});
tblDatas.Rows.Add(newobject[]{"43100000000004","牛七","1986","1",6000,1500,null,"深圳市","518000"});
returntblDatas;
}
#endregion
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
<!--
<scripttype="text/javascript">
$(function(){
$.ajax({
url:'jsondata.ashx',
type:'GET',
dataType:'json',
timeout:1000,
cache:false,
beforeSend:LoadFunction,//加载执行方法
error:erryFunction,//错误执行方法
success:succFunction//成功执行方法
})
functionLoadFunction(){
$("#list").html('加载中...');
}
functionerryFunction(){
alert("error");
}
functionsuccFunction(tt){
$("#list").html('');
//eval将字符串转成对象数组
//varjson={"id":"10086","uname":"zhangsan","email":"zhangsan@qq.com"};
//json=eval(json);
//alert("===json:id="+json.id+",uname="+json.uname+",email="+json.email);
varjson=eval(tt);//数组
$.each(json,function(index,item){
//循环获取数据
varKey=json[index].key;
varInfo=json[index].info;
//varidnumber=json[index].IdNumber;
//varsex=json[index].Sex;
$("#list").html($("#list").html()+"<br>"+Key+"----"+Info.name);//+"-"+idnumber+"-"+sex+"<br/>");
});
}
});
</script>
-->
<%@WebHandlerLanguage="C#"Class="jsondata"%>
usingSystem;
usingSystem.Web;
usingSystem.Web.Script.Serialization;
usingSystem.IO;
usingSystem.Text;
usingSystem.Collections;
usingSystem.Collections.Generic;
usingSystem.Data;
publicclassjsondata:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
context.Response.Cache.SetNoStore();
stringdata="[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";
context.Response.Write(newJavaScriptSerializer().Serialize(data));
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Test2013.aspx.cs"Inherits="Test2013"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="JS/jquery-1.8.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
functionGetPara(o){
varsortid=$(o).val();
$.ajax({
url:'GetPara.ashx?type=get&sortid='+sortid,
type:'GET',
dataType:'json',
timeout:3000,
cache:false,
beforeSend:LoadFunction,//加载执行方法
error:erryFunction,//错误执行方法
success:succFunction//成功执行方法
})
functionLoadFunction(){
$("#list").html('加载中...');
}
functionerryFunction(){
alert("error");
}
functionsuccFunction(tt){
$("#list").html('');
varjson=eval(tt);//数组
$.each(json,function(index,item){
//循环获取数据
varId=json[index].id;
varName=json[index].name;
$("#list").html($("#list").html()+"<br>"+Name+"<inputtype='text'id='"+Id+"'/><br/>");
});
}
};
functionSavePara(){
varparameter={};
$("#listinput:text").each(function(){
varkey=$(this).attr("id");
varvalue=$(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//成功执行方法
})
functionLoadFunction(){
}
functionerryFunction(){
}
functionsuccFunction(tt){
}
};
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:DropDownListID="ddl1"runat="server"onchange="GetPara(this)">
</asp:DropDownList>
<ulid="list"></ul>
<inputtype="button"value="保存数据"onclick="SavePara()"/>
</div>
</form>
</body>
</html>
<%@WebHandlerLanguage="C#"Class="GetPara"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
usingSystem.Collections.Generic;
usingSystem.Web.Script.Serialization;
publicclassGetPara:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
stringSortId=context.Request["sortid"];
stringType=context.Request["type"];
if(Type=="get")
{
if(!string.IsNullOrEmpty(SortId))
{
DataTabledt=MSCL.SqlHelper.GetDataTable("select*fromPR_PRODUCTPARASwheresortid='"+SortId+"'");
List<Paras>list=newList<Paras>();
for(inti=0;i<dt.Rows.Count;i++)
{
Parasa=newParas();
a.id=dt.Rows[i]["PARAID"].ToString();
a.name=dt.Rows[i]["PARANAME"].ToString();
list.Add(a);
}
context.Response.Write(newJavaScriptSerializer().Serialize(list));
}
}
elseif(Type=="save")
{
//反序列化json
System.IO.Streamstream=context.Request.InputStream;
System.IO.StreamReadersr=newSystem.IO.StreamReader(stream,System.Text.Encoding.GetEncoding("UTF-8"));
stringsJson=sr.ReadToEnd();
if(sJson.Contains("&"))
{
string[]sArr=sJson.Split('&');
for(inti=0;i<sArr.Length;i++)
{
string[]sArr1=sArr[i].Split('=');
objectid=sArr1[0];
objectvalue=sArr1[1];
}
}
}
else
{}
}
publicboolIsReusable{
get{
returnfalse;
}
}
publicstructParas
{
publicstringid;
publicstringname;
}
}
以上就是本文的全部内容，希望大家喜欢。