jquery学习笔记3
Posted on | 二月 25, 2010 | No Comments
AJAX应用，很强大
$(“#resText”).load(“test.html”);
//直接简单一个load就代替了好长一段xmlHTTPReq
$(function(){
4 $(“#send”).click(function(){
5 $.get(“get3.php”, {
6 username : $(“#username”).val() ,
7 content : $(“#content”).val()
8 }, function (data, textStatus){
9 var username = data.username;
10 var content = data.content;
11 var txtHtml = “<div class=’comment’><h6>”+username+”:</h6><p class=’para’>”+content+”</p></div>”;
12 $(“#resText”).html(txtHtml); // 把返回的数据添加到页面上
13 },”json”);
14 })
echo “{ username : \”{$_REQUEST['username']}\” , content : \”{$_REQUEST['content']}\”}”
对json类数据处理
$(“#resText”).load(“test.html .para”,function (responseText, textStatus, XMLHttpRequest){
5 alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $(“#iptText”)[0]
6 alert(responseText); //请求返回的内容
7 alert(textStatus); //请求状态：success，error
8 alert(XMLHttpRequest); //XMLHttpRequest对象
9 });
还可以带参数，load函数很强大，不过想想也是都封装到JQ里面了，小项目不如自己写
$.post(“post1.php”, {
5 username : $(“#username”).val() ,
6 content : $(“#content”).val()
7 }, function (data, textStatus){
8 $(“#resText”).html(data); // 把返回的数据添加到页面上
9 }
//post类型的处理
$.post(“post2.php”, {
6 username : $(“#username”).val() ,
7 content : $(“#content”).val()
8 }, function (data, textStatus){
9 var username = $(data).find(“comment”).attr(“username”);
10 var content = $(data).find(“comment content”).text();
11 var txtHtml = “<div class=’comment’><h6>”+username+”:</h6><p class=’para’>”+content+”</p></div>”;
12 $(“#resText”).html(txtHtml); // 把返回的数据添加到页面上
13 },”xml”);
//同样的，对XML数据的处理，基本格式差不多
$.getScript(‘test.js’); 直接把上面写入.JS文件，访问。js文件内容如“var xxx=……”格式
在看下一个例子：
$.getScript(‘http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js’,function(){
5 $(“<p>加载JavaScript完毕</p>”).appendTo(“body”);
6 $(“#go”).click(function(){
7 $(“.block”).animate( { backgroundColor: ‘pink’ }, 1000)
8 .animate( { backgroundColor: ‘blue’ }, 1000);
9 });
10 });
按顺序一个个完成。AWESOME，结尾添加动画，顺便复习下，animate+CSS属性+时间（还记得么）
下面是直接对.JSON格式文件操作
$.getJSON(‘test.json’, function(data) {
6 $(‘#resText’).empty();
7 var html = ”;
8 $.each( data , function(commentIndex, comment) {
9 html += ‘<div><h6>’ + comment['username'] + ‘:</h6><p>’ + comment['content'] + ‘</p></div>’;
10 })
11 $(‘#resText’).html(html);
下面是.json文件内容
[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
很典型了
再来是.ajax
$.ajax({
6 type: “GET”,
7 url: “test.js”,
8 dataType: “script”
9 }); //效果还是那样的
$.ajax({
6 type: “GET”,
7 url: “test.json”,
8 dataType: “json”,
9 success : function(data){
10 $(‘#resText’).empty();
11 var html = ”;
12 $.each( data , function(commentIndex, comment) {
13 html += ‘<div><h6>’ + comment['username'] + ‘:</h6><p>’ + comment['content'] + ‘</p></div>’;
14 })
15 $(‘#resText’).html(html);
16 }
17 }); //进行一些小操作
最后来个调用flickr的API
$.ajax({
7 type: “GET”,
8 url: “http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?”,
9 dataType: “jsonp”,
10 success : function(data){
11 $.each(data.items, function( i,item ){
12 $(“<img class=’para’/> “).attr(“src”, item.media.m ).appendTo(“#resText”);
13 if ( i == 3 ) {
14 return false;
15 }
16 });
17 }
相关文章:
评论|Comments
留言|Leave a Reply
Archives
- 2012年一月 (1)
- 2011年十二月 (1)
- 2011年十一月 (4)
- 2011年十月 (3)
- 2011年九月 (2)
- 2011年八月 (1)
- 2011年七月 (1)
- 2011年五月 (1)
- 2011年三月 (3)
- 2011年二月 (2)
- 2011年一月 (6)
- 2010年十一月 (2)
- 2010年十月 (10)
- 2010年九月 (7)
- 2010年八月 (4)
- 2010年七月 (11)
- 2010年六月 (14)
- 2010年五月 (14)
- 2010年四月 (20)
- 2010年三月 (61)
- 2010年二月 (71)
- 2010年一月 (59)
- 2009年十二月 (78)
- 2009年十一月 (61)
链接表
SUNSHINE
About
本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.
