jQuery学习之三-----AJAX和jQuery

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>

 

 

你可能感兴趣的:(jquery)