1、使用 $(selector).load(url) 来改变 HTML 内容。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用 $(selector).load(url) 来改变 HTML 内容。</title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("#b01").click(function () { 9 $("#myDiv").load("test.txt"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="myDiv"> 16 <h2> 17 通过 AJAX 改变文本</h2> 18 </div> 19 <button id="b01" type="button"> 20 改变内容</button> 21 </body> 22 </html>
2、使用 $.ajax(options) 来改变 HTML 内容。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用ajax来给边html的内容</title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("#b01").click(function () { 9 htmlobj = $.ajax({ url: "test.txt",async: false }); 10 $("#myDiv").html(htmlobj.responseText); 11 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 <div id="myDiv"> 18 <h2> 19 通过 AJAX 改变文本</h2> 20 </div> 21 <button id="b01" type="button"> 22 改变内容</button> 23 </body> 24 </html>