JQuery操作JSON数据

最新推荐文章于 2024-01-05 23:03:37 发布
最新推荐文章于 2024-01-05 23:03:37 发布
阅读量80 收藏
点赞数
文章标签： json javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/scwyh/p/3188312.html
版权

1.在我们的项目中jquery的js文件。 
2.新建一个htm文件，命名为dome.htm吧。 
代码如下：（head区的js代码就是实现的全部代码，有详细注释） 

复制代码代码如下:

<!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>jquery获取json数据演示页面</title> 
<script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script> 
<script type="text/javascript"> 
function getData(){ 
$("#list").html("");//清空列表中的数据 
//发送ajax请求 
$.getJSON( 
"jsondata.ashx",//产生JSON数据的服务端页面 
{name:"test",age:20},//向服务器发出的查询字符串（此参数可选） 
//对返回的JSON数据进行处理，本例以列表的形式呈现 
function(json){ 
//循环取json中的数据,并呈现在列表中 
$.each(json,function(i){ 
$("#list").append("<li>name:"+json[i].name+"  Age:"+json[i].age+"</li>") 
}) 
}) 
} 
</script> 
</head> 
<body> 
<input id="Button1" type="button" value="获取数据" οnclick="getData()" /> 
<ul id="list"></ul> 
</body> 
</html> 


3.我们再建一个一般应用程序（jsonData.ashx） 
代码如下： 

复制代码代码如下:

<%@ WebHandler Language="C#" class="jsonData" %> 
using System; 
using System.Web; 
public class jsonData : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]";//构建的json数据 
//下面两句是用来测试前台向此页面发出的查询字符 
string querystrname = context.Request.QueryString.GetValues("name")[0];//取查询字符串中namer的值 
string querystage = context.Request.QueryString.GetValues("age")[0];//取查询字符串中age的值 
context.Response.Write(data); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 


对以上的内容我只说一点，那就是前台页面中的$.getJSON方法 
$.getJSON(url, params, callback) 
用一个HTTP GET请求一个JavaScript JSON数据 
返回值：XMLHttpRequest 
参数： 
url (String): 装入页面的URL地址。 
params (Map): （可选）发送到服务端的键／值对参数。 
callback (Function): （可选） 当数据装入完成时执行的函数.

转载于:https://www.cnblogs.com/scwyh/p/3188312.html

weixin_33912445
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery操作json的例子
04-18
NULL 博文链接：https://wy649898543.iteye.com/blog/1840580
Jquery如何发送Ajax请求
qq_45991659的博客
10-07 2075
1、首先可以使用$.get()方法，这是发送一个get请求的ajax。 function get(){ $.get("action.php",function(){ }) } 2、可以使用getJSON方法，这是发送get请求，但返回的结果是一个json格式的数据 function get(){ $.get("action.php",function(){ }) $.getJson("action.json",function(data){ }) } 3、要返回一个s
jquery 操作json数据
dao_net的专栏
02-08 1032
1：Json格式在JS中直接通过"对象.属性名称"就可以进行访问；     jQuery 读取JSON 数据     <script src="JScript/jquery-1.8.2.min.js" type="text/javascript">     <script type="text/javascript">         var obj
jQuery操作JSON、服务端操作JSON（Servlet、SpringMVC）
Recar的博客
01-02 903
jQuery操作json、服务器利用servlet和springmvc操作json、实现的例子 入门
jQuery操作json数据
weixin_30322405的博客
05-21 41
json是一种轻量级数据交换格式，简单的json格式为[{"key1":"value1"},{"key2":"value2"}], []代表数组，{}代表数组中的数据对象,key1,key2是一个json对象中的key，一个json中key值唯一，value1,value2，是key键对应的值。 下面使用jquery解析简单的son文件。 这里是songs.json文件内容 [ {"...
Jquery遍历Json数据的方法
10-24
### jQuery遍历Json数据的方法知识点详解 #### 1. jQuery遍历的必要性与优势 在Web开发中，经常需要处理和展示来自服务器的数据，尤其是在构建动态的网页内容时。JSON（JavaScript Object Notation）数据格式因其...
jQuery解析json格式数据示例
10-18
jQuery提供了`.each()`方法，这使得遍历和操作JSON数据变得简单。在提供的代码示例中，有三个不同的`.each()`遍历的例子： 1. 遍历数组： ```javascript var arr1 = [ "one", "two", "three", "four", "five" ]; ...
JQUERY操作JSON实例代码
10-29
通过以上分析，我们可以看到使用jQuery操作JSON数据的简洁性和便利性。通过实例代码的展示，我们学会了如何在前端页面中发送AJAX请求，处理JSON数据，并更新页面内容。这些技术是现代Web开发中不可或缺的一部分，是...
jQuery对JSON数据进行排序输出的方法
10-24
本篇内容将详细介绍如何使用jQuery对JSON数据进行排序，并输出排序后的结果。 首先，我们需要了解几个关键点： 1. JSON数据结构：JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。...
jquery解析JSON数据示例代码
10-26
jQuery作为一个流行的JavaScript库，提供了简单的方法来发送异步请求（如AJAX请求）并处理返回的JSON数据。 知识点一：jQuery异步请求与JSON数据格式 jQuery的AJAX方法（如$.ajax()）可以用来发送异步HTTP请求。当...
JQuery前端操作JSON。
ysds20211402的博客
02-28 197
转自：微点阅读https://www.weidianyuedu.com 一、关于Json的数据格式 从结构上看，所有的数据最终都可以分成三种类型： 第一种类型是scalar（标量），也就是一个单独的string（字符串）或数字（numbers），比如“北京”这个单独的词。 第二种类型是sequence（序列），也就是若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，东京”。 第三种类型是mapping（映射），也就是一个名/值对（Name/value）..
JQuery前端操作JSON
sk901207的专栏
04-22 3625
一、关于Json的数据格式  从结构上看，所有的数据最终都可以分成三种类型：  第一种类型是scalar（标量），也就是一个单独的string（字符串）或数字（numbers），比如“北京”这个单独的词。  第二种类型是sequence（序列），也就是若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，东京”。  第三种类型是mapping（映射
JQuery前端之操作JSON的方法
xinyuerr的博客
10-11 1948
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
实战：当jquery遇上了json
weixin_30882895的博客
06-17 78
jquery:大家一定很熟悉，就算没用过，也应该听说过，不多做介绍，不知道的赶紧google一下。 json:一种数据格式，她小巧，轻盈。在javascript的世界中，完胜XML。 jquery和json都是因为小与巧而被广泛使用，今天把她们弄到一起，大家应该没意见吧。 废话了一把，现在言归正传， 通过这篇文章你可以得到以下收获： 1.jqury如何用ajax的形式调用后台asp....
可视化编辑json数据——json editor
赶路人儿
07-18 9121
最近开发了一个chrome插件，需要找一个轻量级的可视化编辑json的组件。当然使用ace这一类组件是完全可以的，但是个人感觉比较重量。于是查阅了一些资料，整理如下。 对于一个json字符串，通过javascript的如下方法可以很方便的对其格式化： var jsonObj = JSON.parse(json_val) //把json字符串转为json对象 var formattedStr = JSON.stringify(jsonObj, null, 4); 将formattedStr字符串可
JQuery前端如何操作JSON
hdxx2022的博客
02-10 260
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
JQuery前端操作JSON浅谈
最新发布
xinyuerr的博客
01-05 995
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
JQuery02-JSON和AJAX的使用
小云很优秀
05-10 885
JSON 定义 JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript （欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 格式 JSON 就是一种有格式的字符串。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。 规则如下: 映射用冒号（“:”）表示。”名称” : 值，标准格式名称用双引号括起来； 并
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值