jquery+ajax获取并操作json数据（附代码）-js教程-PHP中文网

首页

web前端

js教程

jquery+ajax获取并操作json数据（附代码）

php中世界最好的语言

Apr 25, 2018 pm 03:13 PM

javascriptjson

这次给大家带来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="&#39; + json[i].Id + &#39;">' + 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=&#39;text&#39; id=&#39;" + Id + "&#39; /><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; 
 } 
}

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

推荐阅读：

ajax读取properties步骤详解

jquery+ajax提交form表单方法总结

jQuery+与ajax怎么实现局部刷新功能

以上是jquery+ajax获取并操作json数据（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。