标签存档: json

jquery ajax学习总结

最近一段时间一直在学习jquery ajax 的应用,用了两周的时间把jquery基础教程上面的第六章看完,边看边练习感觉

还好,能够消化一部分,但还是有一些知识点理解的不够透彻,还需要继续努力啊,不过还是有必要先这里总结一下我

学会的东西,在这一章里主要讲了使用jquery基于请求加载数据(html、js、json、xml),下面来逐一进行分析。

一:追加html代码片段

使用load方法可以载入一段远程的html代码插入到dom中,写法很简单,如下:

$(function(){
	//load载入html代码
	/*$('#look a').click(function(){
		$('#newCon').load('a.html');//加载a.html页面,追加到id为newCon元素内
		return false;
	});*/
});

在这个方法中稍作修改可以加载你指定标签内的数据,比如$(‘#newCon’).load(‘a.html’);改成$(‘#newCon’).load(‘a.html ol’)只显示a.html页面内的ol(包括文本)元素。

二:加载js脚本文件 实例如下:
1、

$(function(){
	$('#btn').click(function(){
		$.getScript('c.js',function(){ //用getScript方法获取c.js文件成功后设置一个回调函数来对数据进行解析处理
			var html = '';//创建空的变量html
			$.each(entries,function(){  //entries 是c.js中的entries对象,解析后保存到html变量中
				html+='<div class="item">';
				html+='<h3 class="name">'+this['name']+'</h3>';
				html+='<strong class="vocation">'+this['vocation']+'</strong>';
				html+='<p class="definition">'+this['definition']+'</p>';
				html+='</div>';
				html+='<hr />';
			});
			$('#con').html(html);	将html 追加到id为con的元素中
		});
		return false;
	});
});

2、

$(function(){
		$.getScript('userInfo.js',function(){
			var html='';
			$.each(user,function(){
				var links = this['siteLinks'];//得到siteLinks所有的数据,即链接地址
				var tag_a = '<a href="'+links+'" target="_blank">'+this['name']+'</a>';//获取名字放入a标记内并设置a标记的链接
				//alert(tag_a);
				html+='<li class="item">';
				html+='<h2>'+'姓名:'+tag_a+'</h2>';
				html+='<em>'+'年龄:'+this['age']+'</em>';
				html+='<p>'+'介绍:'+this['intro']+'</p>';
				if(this['achievement']){
					html+='<div>';
					html+='<b>'+'成就:'+'</b>';
					$.each(this['achievement'],function(i,item){
						html+='<p>'+item+'</p>';
					});
					html+='</div>';
				}
				html+='</li>';
				html+='<hr />';
			});
			$('#list').html(html);
		});
	return false;
});

三:加载json文件,json格式的文件要求比较严格,所有的方括号、花括号、引号和逗号都必须合理而且适当的存在,否则会出现意想不到的错误实例代码如下:

$(function(){
$("#button").click(function(){
 $.getJSON( "json1.json" ,function(data){  // getJSON方法获得json文件的代码,其中的回调函数的参数data就是json代码
  $("#json").empty();  //清空带“json” ID的div标签的内容
  $.each(data,function(entryIndex,entry){ //each方法遍历json文件中的对象,entryIndex是当前索引, entry是当前项
   var html="<div class= entry >";
   html += "<h3 class= term >"+entry[ "term" ]+ "</h3>" ;
   html += "<div class= part >"+entry[ "part" ]+"</div>";
   html += "<div class= definition >"+entry[ "definition" ];
   if(entry[ "quote" ]){
    html+="<div class= quote >";
    $.each(entry[ "quote" ],function(quoteIndex,line){
     html+="<p>"+line+"</p>";
    });
    html+="</div>";
   }
   html+="</div>";
   html +="</div>";
   $("#json").append(html);
  });
 });
 return false;
});
});

四:加载xml文件,加载xml很简单和json很相识,在这里使用get方法获取xml文档,代码如下:

$(function(){
	$.get('a.xml',function(data){//得到xml文件并设置回调函数,参数data是当前xml对象
		$(data).find('item').each(function(){遍历xml内item标签
			var item = $(this);
			var html="<li>";
			html+= '<span>'+item.attr('term')+'</span>';
			html+= '<p>'+item.attr('part')+'</p>';
			html+='<p>'+item.find('num').text()+'</p>';
			html+='<strong>'+item.find('name').text()+'</strong>';
			html+='<div>'+item.find('city').text()+'</div>';
			html+='</li>';
			$('#list').append(html);
		});
		return false;
	});
});

以上是我所学到的一些ajax的知识,可能理解的不全对,还在继续的学习中……