【练习向】jQuery基础教程第四版课后练习——Book06_jQuery_通过Ajax发送数据

要完成以下练习，需要此书本章的index.html文件以及complete.js中包含的已经完成的JavaScript代码。可以从Packt Publishing网站下载这些文件。

“挑战”练习有一些难度，完成这些练习的过程中可能需要参考jQuery官方文档

重要：chorme不支持本地的ajax的调用，所以在做本章本地ajax测试的时候请换用IE或者Firefox浏览器。

index.html原图

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

$(document).ready(function(){
		$('#dictionary').load('exercises-content.html .letter');//在这里就先提取到index.html里dictionary区域里了，如果要换区域，更改这里的id('#dictionary')或者class即可

	});

练习一 完成效果图

(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 );
		};
	});//因为.load()没有提供错误回调参数，所以不能给.load()后连缀.fail()方法，所以参考jQuery API (http://api.jquery.com/load/)方法完成.load()错误处理。
    });
});

练习三 完成效果图

(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 += '
' + (jsonIndex + 1);
		html += '
name: ' + json_val.name + '
';
		html += '
html_url: ' + json_val.html_url + '
';
		html += '
';
	});
	$('#dictionary').html(html);
    });
});

 

练习四 完成效果图

下面将本章练习可能用到的文件代码提供如下：

index.html

  
    
    

    

    
    
  
  
    

      

        
The Devil's Dictionary
        
by Ambrose Bierce
      

      

        

          
A
        
        

          
B
        
        

          
C
        
        

          
D
        
        

          
E
          

            
Eavesdrop
            
Edible
            
Education
            
Eloquence
            
Elysium
            
Emancipation
            
Emotion
            
Envelope
            
Envy
            
Epitaph
            
Evangelist
          
        
        

          
F
          

            
            Search
          
        
        

          
G
        
        

          
H
        

      
      

      

    
  

complete.js

$(document).ready(function() {
  $('#letter-a a').click(function(event) {
    event.preventDefault();

    $.ajaxSetup({
      url: 'a.html',
      type: 'POST',
      dataType: 'html'
    });

    $.ajax({
      type: 'GET',
      success: function(data) {
        $('#dictionary').html(data);
      }
    });
  });

  $('#letter-b a').click(function(event) {
    event.preventDefault();
    $.getJSON('b.json', function(data) {
      var html = '';
      $.each(data, function(entryIndex, entry) {
        html += '
';
        html += '
' + entry.term + '
';
        html += '
' + entry.part + '
';
        html += '
';
        html += entry.definition;
        if (entry.quote) {
          html += '
';
          $.each(entry.quote, function(lineIndex, line) {
            html += '
' + line + '
';
          });
          if (entry.author) {
            html += '
' + entry.author + '
';
          }
          html += '
';
        }
        html += '
';
        html += '
';
      });
      $('#dictionary').html(html);
    });
  });

  $('#letter-c a').click(function(event) {
    event.preventDefault();
    $.getScript('c.js');
  });

  $('#letter-d a').click(function(event) {
    event.preventDefault();
    $.get('d.xml', function(data) {
      $('#dictionary').empty();
      $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '
';
        html += '
' + $entry.attr('term');
          html += '
';
        html += '
' + $entry.attr('part');
          html += '
';
        html += '
';
        html += $entry.find('definition').text();
        var $quote = $entry.find('quote');
        if ($quote.length) {
          html += '
';
          $quote.find('line').each(function() {
            html += '
';
              html += $(this).text() + '
';
          });
          if ($quote.attr('author')) {
            html += '
';
              html += $quote.attr('author') + '
';
          }
          html += '
';
        }
        html += '
';
        html += '
';
        $('#dictionary').append($(html));
      });
    });
  });

  $('#letter-e a').click(function(event) {
    event.preventDefault();
    var requestData = {term: $(this).text()};
    $.get('e.php', requestData, function(data) {
      $('#dictionary').html(data);
    }).fail(function(jqXHR) {
      $('#dictionary')
      .html('Sorry, but an error occurred: ' + jqXHR.status)
      .append(jqXHR.responseText);
    });
  });

  $('#letter-f form').submit(function(event) {
    event.preventDefault();
    var formValues = $(this).serialize();
    $.get('f.php', formValues, function(data) {
      $('#dictionary').html(data);
    });
  });

  var url = 'http://examples.learningjquery.com/jsonp/g.php';
  $('#letter-g a').click(function(event) {
    event.preventDefault();
    $.getJSON(url + '?callback=?', function(data) {
      var html = '';
      $.each(data, function(entryIndex, entry) {
        html += '
';
        html += '
' + entry.term + '
';
        html += '
' + entry.part + '
';
        html += '
';
        html += entry.definition;
        if (entry.quote) {
          html += '
';
          $.each(entry.quote, function(lineIndex, line) {
            html += '
' + line + '
';
          });
          if (entry.author) {
            html += '
' + entry.author + '
';
          }
          html += '
';
        }
        html += '
';
        html += '
';
      });
      $('#dictionary').html(html);
    });
  });

  $('#letter-h a').click(function(event) {
    event.preventDefault();
    $('#dictionary').load('h.html .entry');
  });

  var $loading = $('
Loading...
')
    .insertBefore('#dictionary');

  $(document).ajaxStart(function() {
    $loading.show();
  }).ajaxStop(function() {
    $loading.hide();
  });

  $('body').on('click', 'h3.term', function() {
    $(this).siblings('.definition').slideToggle();
  });
});

注：以上答案仅供参考，并非完美答案，所有解答都以所在章节所学内容为主并不使用后期章节的方法，如果有更好的答案欢迎以回复形式一起分享。