最近一段时间一直在学习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的知识,可能理解的不全对,还在继续的学习中……