1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>Ajax之异步导入HTML</title> 8 <link rel="stylesheet" href="../css/common.css" type="text/css" /> 9 <style type="text/css"> 10 ul { 11 list-style-type: none; 12 } 13 li { 14 position: relative; 15 margin-left: -25px; 16 } 17 </style> 18 <script src="jquery-1.5.2.js" type="text/javascript"></script> 19 <script type="text/javascript"> 20 $(document).ready( function() { 21 //click事件函数返回false，抑制默认动作 22 $(".list").click(function(){ 23 /* 24 * .load(url, parameters, callback) 25 * url定义了服务端脚本文件位置 26 * parameters包含了我们想传递给服务端脚本文件以进行某种处理的数据 27 * callback是请求成功后执行的回调函数 28 */ 29 //load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中 30 $('#message').load('info.html'); 31 //alert(members.length); 32 //$.each(members, function(i, v){ 33 //}); 34 //第一次点击链接输出的html为空，第二次点击才有内容，所以这里用一个自动触发点击事件 35 return false; 36 }); 37 }); 38 </script> 39 </head> 40 <body> 41 <p>We are going to organize the conference on IT</p> 42 <a href="#" class="list">Participants</a> 43 <div id="message"></div> 44 </body> 45 </html>
2.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <p>The list of the persons taking part in the conference</p> 11 <ul> 12 <li>Jack</li> 13 <li>Marry</li> 14 <li>Mike</li> 15 <li>Joron</li> 16 <li>Jack</li> 17 </ul> 18 </body> 19 </html>
