runfast󰀦lynda

jQuery基础教程-学习笔记(5)

通过AJAX发送数据

$('#letter-e a').click(function(){
  var requestData = {term: $(this).text()};
  $.get('e.php',requestData,function(data){
  $('#dictionary').html(data);
  });
  return false;
});

在这个例子中,键始终是term,而值取自每个链接的文本。

第六单元练习

(1)页面加载后,把exercises-content.html的主体(body)内容提取到页面的内容区域。

$(document).ready(function(){  
  $('#dictionary').load('exercises-content.html .letter');   
});

(2)不要一次就显示整个文档,请为左侧的字母列表创建“提示条”,当用户鼠标放到字母上时,从exercises-content.html中加载与该字母有关的内容。

$(document).ready(function(){  
  $('h3').mouseover(function(){  
    var letter_id = $(this).parent().attr('id');  
    $('#dictionary').load('exercises-content.html #' + letter_id);  
  });  
});  

(3)为页面加载添加错误处理功能,在页面的内容区显示错误消息。修改脚本,请求does-not-exist.html 而不是exercises-content.html,以测试错误处理功能。

$(document).ready(function(){  
  $('h3').mouseover(function(){  
  var letter_id = $(this).parent().attr('id');  
  $('#dictionary').load('does-not-exist.html #' + letter_id, function(response, status, xhr){  
    if(status == 'error'){  
      var msg = 'Sorry but there was an error: ';  
      $('#dictionary').html(msg + xhr.status + ' ' + xhr.statusText );  
    };  
  });  
  });  
});

(4)挑战:页面加载后,向GitHub发送一个JSONP请求,取得某个用户代码库的列表。把每个代码库的名称和URL插入到页面的内容区。取得jQuery项目代码库的URL是http://api.github.com/users/jquery/repos。

$(document).ready(function(){  
  $.getJSON('https://api.github.com/users/jquery/repos', function(data){  
  var html = '';  
  $.each(data, function(jsonIndex, json_val){  
    html += '<ul style="list-style-type:none;">' + (jsonIndex + 1);  
    html += '<li>name: ' + json_val.name + '</li>';  
    html += '<li>html_url: ' + json_val.html_url + '</li>';  
    html += '</ul>';  
  });  
  $('#dictionary').html(html);  
  });  
});