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+" 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 的例子** 在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛用于前后端交互。jQuery,一个流行的 JavaScript 库,提供了简单易用的 API 来处理 JSON ...
结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...
在这个例子中,`url`是服务器端接口的地址,`type`是请求类型,`dataType`指定我们期望服务器返回的数据类型为JSON。`success`回调函数会在请求成功并接收到数据时被调用,`data`参数就是解析后的JSON对象。`error`...
在提供的压缩包中,"新建 文本文档.txt"可能是示例代码或者关于这个例子的说明,而"JQuery&JSON"可能是一个包含jQuery库和JSON数据文件的目录。确保正确引用这些资源,以使示例正常工作。 总结来说,这个综合例子...
这个插件可能包含了对JSON的解析和序列化的方法,使得在jQuery中操作JSON变得更加便捷。例如,`$.parseJSON()`方法可以用来解析一个JSON字符串为JavaScript对象,而`$.toJSON()`方法则可以将JavaScript对象序列化为...
这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...
这个"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
在这个“jquery ajax json”的例子中,我们将探讨如何结合这三者实现动态的数据加载。 首先,`display.html`是主页面,它包含HTML结构以及调用jQuery AJAX函数的JavaScript代码。在这个HTML文件中,通常会有一个...
**jQuery + JSON 小例子详解** 在Web开发中,jQuery 和 JSON 都是不可或缺的工具。jQuery 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。JSON(JavaScript Object Notation)则...
这些例子可能涉及到jQuery的选择器、DOM操作、事件绑定、动画效果、Ajax请求以及与其他库如jQuery UI的集成等。通过学习和实践这些例子,开发者能够掌握jQuery的基本用法,并了解如何在实际项目中有效利用它。 总的...
总结一下,jQuery简化了DOM操作和Ajax请求,Ajax允许我们在不刷新页面的情况下与服务器进行通信,而JSON则提供了一种高效的数据交换格式。在"TestJQuery"这个例子中,这三个技术的结合展示了如何构建一个动态的、...
本人折腾了两天才探索出来的, 程序简单,客服端通过jquery的getJSON函数请求PHP服务端,服务端返回一个二维数组,客户端把结果经简单处理打印出来。此例非常经典,初学者看了可以少走很多弯路(因为那些弯路我帮你...
在JavaScript和jQuery中,解析JSON数据是常见的任务,特别是在与服务器进行异步通信时。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成。在jQuery中...
本文将详细介绍如何利用jQuery来实现与JSON和AJAX的有效结合,并通过一个具体的例子来展示其实际应用。 #### 二、基础知识简介 ##### 2.1 jQuery简介 jQuery是一款快速、简洁的JavaScript库,它极大地简化了HTML...
在这个"struts2+jquery+json"的小例子中,我们可能会看到以下几个关键知识点: 1. **Struts2框架**: - **Action和Result**:Struts2的核心组件,Action负责业务逻辑处理,Result负责控制页面跳转。 - **...
这些方法可以异步地从服务器获取JSON数据,然后使用jQuery的方法如$.each()来遍历和操作这些数据,更新DOM以呈现给用户。 例如,假设我们有一个简单的用户列表,用户信息以JSON格式存储在服务器上。前端的jQuery...
总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...
在"jquery ajax json struts2最简单例子测试成功"的项目中,我们可以推断出以下几个关键点: 1. **整合jQuery与AJAX**:项目中可能使用jQuery的$.ajax()方法来发送异步请求。$.ajax()提供了一种方式,通过HTTP GET...