`
adong
  • 浏览: 35920 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JQUERY操作JSON例子

阅读更多
jquery:大家一定很熟悉,就算没用过,也应该听说过,不多做介绍,不知道的赶紧google一下.

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等).这些特性使JSON成为理想的数据交换语言.

jquery和json都是因为小与巧而被广泛使用,今天把她们弄到一起,大家应该没意见吧.
废话了一把,现在言归正传,
通过这篇文章你可以得到以下收获:
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
2.jquery简单的dom操作
3.送本jquery的开发手册给大家(大家慢慢去研究:JQuery中文入门指南)
4.JSON Demo测试(漫步者花园网站左侧分类列表 JSP+JQUERY+JSON)

准备工作:
首先,我们新建个网站(.net2.0就行,当然JSP\PHP\ASP\CGI都可以).
1.在我们的项目中jquery的js文件.
2.新建一个htm文件,命名为dome.htm吧.
代码如下:(head区的js代码就是实现的全部代码,有详细注释)
Code
<!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+"&nbsp; Age:"+json[i].age+"</li>")
})
})
}
</script>
</head>
<body>
<input id="Button1" type="button" value="获取数据" onclick="getData()" />
<ul id="list"></ul>
</body>
</html>
3.我们再建一个一般应用程序(jsonData.ashx)
代码如下:
Code
<%@ 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): (可选) 当数据装入完成时执行的函数.
此外jQuery还有$.ajax方法,$.get方法和$.post方法都提供对json的支持

jQuery api 下载

站内更多jquery与json的笔记
分享到:
评论

相关推荐

    JQuery操作json的例子

    **jQuery 操作 JSON 的例子** 在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛用于前后端交互。jQuery,一个流行的 JavaScript 库,提供了简单易用的 API 来处理 JSON ...

    简单的SSH+JQuery+JSON例子

    结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...

    jQuery读取json数据

    在这个例子中,`url`是服务器端接口的地址,`type`是请求类型,`dataType`指定我们期望服务器返回的数据类型为JSON。`success`回调函数会在请求成功并接收到数据时被调用,`data`参数就是解析后的JSON对象。`error`...

    AJAX+JQuery+JSON的综合例子

    在提供的压缩包中,"新建 文本文档.txt"可能是示例代码或者关于这个例子的说明,而"JQuery&JSON"可能是一个包含jQuery库和JSON数据文件的目录。确保正确引用这些资源,以使示例正常工作。 总结来说,这个综合例子...

    Jquery.json.js

    这个插件可能包含了对JSON的解析和序列化的方法,使得在jQuery中操作JSON变得更加便捷。例如,`$.parseJSON()`方法可以用来解析一个JSON字符串为JavaScript对象,而`$.toJSON()`方法则可以将JavaScript对象序列化为...

    ajax,jQuery 例子大全,json例子

    这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...

    Struts2 JQueryJson例子 .rar

    这个"Struts2 JQueryJson例子 .rar"压缩包很可能是包含了一个实际的项目实例,演示了如何在Struts2框架中利用JQuery和JSON进行数据交互。下面将详细讲解Struts2、JQuery和JSON的相关知识点: 1. **Struts2框架**: ...

    Struts2+Jquery+JSON 应用例子

    Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON

    jquery ajax json 的例子

    在这个“jquery ajax json”的例子中,我们将探讨如何结合这三者实现动态的数据加载。 首先,`display.html`是主页面,它包含HTML结构以及调用jQuery AJAX函数的JavaScript代码。在这个HTML文件中,通常会有一个...

    jquery+json小例子

    **jQuery + JSON 小例子详解** 在Web开发中,jQuery 和 JSON 都是不可或缺的工具。jQuery 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。JSON(JavaScript Object Notation)则...

    json + struts2 + 80个JQuery 效果 个例子

    这些例子可能涉及到jQuery的选择器、DOM操作、事件绑定、动画效果、Ajax请求以及与其他库如jQuery UI的集成等。通过学习和实践这些例子,开发者能够掌握jQuery的基本用法,并了解如何在实际项目中有效利用它。 总的...

    jquery+ajax+json例子

    总结一下,jQuery简化了DOM操作和Ajax请求,Ajax允许我们在不刷新页面的情况下与服务器进行通信,而JSON则提供了一种高效的数据交换格式。在"TestJQuery"这个例子中,这三个技术的结合展示了如何构建一个动态的、...

    php+jquery+json完美结合例子

    本人折腾了两天才探索出来的, 程序简单,客服端通过jquery的getJSON函数请求PHP服务端,服务端返回一个二维数组,客户端把结果经简单处理打印出来。此例非常经典,初学者看了可以少走很多弯路(因为那些弯路我帮你...

    用jquery解析JSON数据的方法20110227

    在JavaScript和jQuery中,解析JSON数据是常见的任务,特别是在与服务器进行异步通信时。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成。在jQuery中...

    jquery与json和ajax的结合

    本文将详细介绍如何利用jQuery来实现与JSON和AJAX的有效结合,并通过一个具体的例子来展示其实际应用。 #### 二、基础知识简介 ##### 2.1 jQuery简介 jQuery是一款快速、简洁的JavaScript库,它极大地简化了HTML...

    struts2+jquery+json 小例子

    在这个"struts2+jquery+json"的小例子中,我们可能会看到以下几个关键知识点: 1. **Struts2框架**: - **Action和Result**:Struts2的核心组件,Action负责业务逻辑处理,Result负责控制页面跳转。 - **...

    一个简单的struts2+json+jquery 交互的例子

    这些方法可以异步地从服务器获取JSON数据,然后使用jQuery的方法如$.each()来遍历和操作这些数据,更新DOM以呈现给用户。 例如,假设我们有一个简单的用户列表,用户信息以JSON格式存储在服务器上。前端的jQuery...

    struts2+jquery+json+ajax例子

    总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...

    jquery ajax json struts2最简单例子测试成功

    在"jquery ajax json struts2最简单例子测试成功"的项目中,我们可以推断出以下几个关键点: 1. **整合jQuery与AJAX**:项目中可能使用jQuery的$.ajax()方法来发送异步请求。$.ajax()提供了一种方式,通过HTTP GET...

Global site tag (gtag.js) - Google Analytics