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

2020-05-29 07:21:10易采站长站整理

对于问题从后台获取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)