如何获取JQUERY AJAX返回的JSON结果集实现代码

发布网友发布时间：2022-05-15 03:56

共2个回答

懂视网时间：2022-05-15 08:17

这次给大家带来jquery+ajax获取并操作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 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"> 
 <p> 
 <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)"> 
 </asp:DropDownList> 
 <ul id="list"></ul> 
 <input type="button" value="保存数据" onclick="SavePara()" /> 
 </p> 
 </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; 
 } 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！