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

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>

posted on 2012-05-03 15:01 千里烟波226 阅读(288) 评论(0) 编辑收藏举报