JQUERY AJAX和JSON例子
基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
我们先来看一下html模板:
订单ID | 客户ID | 雇员ID | 订购日期 | 发货日期 | 货主名称 | 货主地址 | 货主城市 | 更多信息 |
---|---|---|---|---|---|---|---|---|
一定要注意的就是里面所有的id属性,这个是一个关键。再来看一下AJAX请求和绑定数据的代码
$.ajax({
type:"get",//使用get方法访问后台
dataType:"json",//返回json格式的数据
url:"BackHandler.ashx",//要访问的后台地址
data:"pageIndex="+pageIndex,//要发送的数据
complete:function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
success:function(msg){//msg为返回的数据,在这里做数据绑定
var data=msg.table;
$.each(data,function(i,n){
var row=$("#template").clone();
row.find("#OrderID").text(n.订单ID);
row.find("#CustomerID").text(n.客户ID);
row.find("#EmployeeID").text(n.雇员ID);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!==undefined)row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html(" More");
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row=$("#template").clone();”先把模板复制一份,接下来row.find("#OrderID").text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里
row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
所有的这些,都是放在一个静态的页面里,只通过AJAX方法从后台获取数据,所有html代码如下:
value="<"/> value=">>"/> 订单ID 客户ID 雇员ID 订购日期 发货日期 货主名称 货主地址 货主城市 更多信息
LOADING....
PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板
fsdfasdf
还是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成服务器控件的模板)。
再简单说一下AJAX请求的后台,用的是Access的Northwind数据库,把订单表放到DataTable里,然后通过DataTable2JSON转化成JSON数据格式传回来就完了,不过后台用了一些分页和缓存的方法,希望对初学者有一些帮助。
全部例子到https://www.360docs.net/doc/c23144465.html,/fredlau/JSON.rar下载
参考资料:https://www.360docs.net/doc/c23144465.html,/fredlau/JSON.pdf
ajax读取json数据
Js代码
1.首先建立json.txt文件
2.
3.{
4."programmers":[
5.{"firstName":"Brett","lastName":"McLaughlin","email":"brett@newInstan
https://www.360docs.net/doc/c23144465.html,"},
6.{"firstName":"Jason","lastName":"Hunter","email":"jason@https://www.360docs.net/doc/c23144465.html,"
},
7.{"firstName":"Elliotte","lastName":"Harold","email":"elharo@https://www.360docs.net/doc/c23144465.html,
"}
8.],
9."authors":[
10.{"firstName":"Isaac","lastName":"Asimov","genre":"science fiction"},
11.{"firstName":"Tad","lastName":"Williams","genre":"fantasy"},
12.{"firstName":"Frank","lastName":"Peretti","genre":"christian fiction"}
13.],
14."musicians":[
15.{"firstName":"Eric","lastName":"Clapton","instrument":"guitar"},
16.{"firstName":"Sergei","lastName":"Rachmaninoff","instrument":"piano"}
17.]
18.}
19.
20.通过异步调用,来读取json数据
21.
22.
23.
24.
25.var xmlHttp;
26.function createXMLHttpRequest()
27.{
28.if(window.ActiveXObject)
29.{
30.xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
31.}
32.else if(window.XMLHttpRequest)
33.{
34.xmlHttp=new XMLHttpRequest();
35.}
36.}
37.function startRequest()
38.{
39.createXMLHttpRequest();
40.try
41.{
42.xmlHttp.onreadystatechange=handleStateChange;
43.xmlHttp.open("GET","Json.txt",true);
44.xmlHttp.send(null);
45.}
46.catch(exception)
47.{
48.alert("xmlHttp Fail");
49.}
50.}
51.function handleStateChange()
52.{
53.if(xmlHttp.readyState==4)
54.{
55.if(xmlHttp.status==200||xmlHttp.status==0)
56.{
57.var result=xmlHttp.responseText;
58.var json=eval("("+result+")");
59.alert(json.programmers[0].firstName);//读取json数据
60.//alert(json.sex);
61.}
62.}
63.}
64.
65.
66.
67.
68.
69.
70.
71.
Ajax与JSON的一些总结
在不重新加载页面的情况下更新网页
通过上述代码会启动一个针对myxhrtest.aspx的GET请求,这里有两点要注意:一是URL相对于执行代码的当前页面(使
用绝对路径);二是调用open()方法并不会真正发送请求,而只是启动一个请求准备发送。
只能向同一个域中使用相同端口和协议的URL中发送请求;如果URL与启动请求的页面有任何差别,都会引发安全错误。
要真正发送请求要使用send()方法,send()方法接受一个参数,即要作为请求主体发送的数据,如果不需要通过请求主体发送数据,我们必须传递一个null值。在调用send()之后,请求就会被分派到服务器,完整Ajax请求代码如下:
同步请求:发生请求后,要等待服务器执行完毕才继续执行当前代码。
异步请求:发生请求后,无需等到服务器执行完毕,可以继续执行当前代码。
现在我们要增加判断readyState属性值,当readyState=4时,表示全部数据接收完成,所以Ajax的异步请求代码如下:
后台转换JSON数据类型,前台解析JSON数据等等例子总结
后台转换JSON数据类型,前台解析JSON数据等等例子总结 JSON对象: JSONObject obj = new JSONObject(); obj.put("result", 0); obj.put("message", message); return obj.toJSONString(); 前台解析: Success:function(data){ var result = data.result; var message = data.message; } json对象中有json对象的写法: Objstr为一个JSONObject obj的String转换 private String getsuccess(String objstr,int number){ JSONObject obj = new JSONObject(); obj.put("result", 1); obj.put("obj", objstr); obj.put("number", number); return obj.toJSONString(); }
前台解析: Picjson为success返回的data var result = picjson.result; if (result==1) { var objdata = picjson.obj; var data = eval('(' + objdata + ')'); var num = picjson.number; picurl = null; showpiclist(data, num); } else{ alert(picjson.message); picurl = null; } list转成json对象 需要的包: https://www.360docs.net/doc/c23144465.html,mons-lang.jar https://www.360docs.net/doc/c23144465.html,mons-beanutils.jar https://www.360docs.net/doc/c23144465.html,mons-collections.jar https://www.360docs.net/doc/c23144465.html,mons-logging.jar
jQuery+AJAX+JSON
jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。 jQuery的核心理念是Write less,Do more。 使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。 2.jQuery的特点: 利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处:a、兼容性更好;b、代码更简洁 3.编程步骤: step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象?? jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象
var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器?? jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素
Json数据格式的使用方法入门教程
JSON 数据格式解析 和 XML 一样,JSON 也是基于纯文本的数据格式。由于 JSON 天生是为JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用 JSON 传输一个简单的 String,Number,Boolean,也可以传输一个数组,或者一个复杂的Object 对象。 String,Number 和 Boolean 用 JSON 表示非常简单。例如,用 JSON 表示一个简单的 String “ abc ”,其格式为: "abc" 除了字符 ",\,/ 和一些控制符(\b,\f,\n,\r,\t)需要编码外,其他 Unicode 字符可以直接输出。下图是一个 String 的完整表示结构: 图 1. String 的完整表示结构 一个 Number 可以根据整型或浮点数表示如下:
图 2. Number 的表示结构 这与绝大多数编程语言的表示方法一致,例如: 12345(整数) -3.9e10(浮点数) Boolean 类型表示为 true 或 false 。此外,JavaScript 中的 null 被表示为 null,注意,true、false 和 null 都没有双引号,否则将被视为一个String 。 JSON 还可以表示一个数组对象,使用 [] 包含所有元素,每个元素用逗号分隔,元素可以是任意的 Value,例如,以下数组包含了一个 String,Number,Boolean 和一个 null: Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的,实际上此处的 Object 相当于 Java 中的 Map
Jquery Ajax 异步处理Json数据
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在https://www.360docs.net/doc/c23144465.html,里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的. 代码如下: 前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>