005 Ajax中使用jquery实现三种格式的信息

1.jquery中的ajax

二：load

2.load方法

3.load测试程序大纲

4.load测试程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $("a").click(function(){
10             //去缓存的方式
11             var url=this.href;
12             var args={"time":new Date()};
13             $("#content").load(url,args);    
14             return false;
15         });
16     });
17 </script>
18 </head>
19 <body>
20     <a href="helloAjax.txt">Hello Click</a>
21     <div id="content"></div>
22 </body>
23 </html>

5.修改以前的html格式程序设计（load函数）

6.修改以前的html格式程序（load函数）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     @import url("clearleft.css");
 8 </style>
 9 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
10 <script type="text/javascript">
11     $(function(){
12         $("a").click(function(){
13             var url=this.href;
14             var args={"time":new Date()};
15             $("#details").load(url,args);
16             return false;
17         })
18     });
19 </script>
20 </head>
21 <body>
22     <h1>People</h1>
23     <ul>
24         <li><a href="files/andy.html">Andy</a></li>
25         <li><a href="files/richard.html">Richard</a></li>
26         <li><a href="files/jeremy.html">Jeremy</a></li>    
27     </ul>
28     <div id="details"></div>
29 </body>
30 </html>

7.效果

　　效果如以前。

8.带选择器的load函数（html格式）

三：get与post

1.介绍

2.修改以前的html格式程序(xml格式，使用get方式)

　　这里只有index.html，因为其他程序没有改变。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     @import url("clearleft.css");
 8 </style>
 9 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
10 <script type="text/javascript">
11     $(function(){
12         $("a").click(function(){
13             var url=this.href;
14             var args={"time":new Date()};
15             $.get(url,args,function(data){
16                 var name=$(data).find("name").text();
17                 var website=$(data).find("website").text();
18                 var email=$(data).find("email").text();
19                 $("#details").empty()
20                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
21                     .append("<a href='"+website+"'>"+website+"</a>");
22             });
23             return false;
24         })
25     });
26 </script>
27 </head>
28 <body>
29     <h1>People</h1>
30     <ul>
31         <li><a href="files/andy.xml">Andy</a></li>
32         <li><a href="files/richard.xml">Richard</a></li>
33         <li><a href="files/jeremy.xml">Jeremy</a></li>    
34     </ul>
35     <div id="details"></div>
36 </body>
37 </html>

3.修改以前的html格式程序(xml格式，使用post方式)

　　相对而言，只需要将上面的程序中的get改成post即可。

四：getJSON

1.针对json格式的程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     @import url("clearleft.css");
 8 </style>
 9 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
10 <script type="text/javascript">
11     $(function(){
12         $("a").click(function(){
13             var url=this.href;
14             var args={"time":new Date()};
15             $.getJSON(url,args,function(data){
16                 var name=data.person.name;
17                 var website=data.person.website;
18                 var email=data.person.email;
19                 $("#details").empty()
20                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
21                     .append("<a href='"+website+"'>"+website+"</a>");
22             });
23             return false;
24         });
25     });
26 </script>
27 </head>
28 <body>
29     <h1>People</h1>
30     <ul>
31         <li><a href="files/andy.js">Andy</a></li>
32         <li><a href="files/richard.js">Richard</a></li>
33         <li><a href="files/jeremy.js">Jeremy</a></li>    
34     </ul>
35     <div id="details"></div>
36 </body>
37 </html>

2.但是json格式也可以使用get

　　将getJSON替换成get方法，但是需要将格式告诉get

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     @import url("clearleft.css");
 8 </style>
 9 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
10 <script type="text/javascript">
11     $(function(){
12         $("a").click(function(){
13             var url=this.href;
14             var args={"time":new Date()};
15             $.get(url,args,function(data){
16                 var name=data.person.name;
17                 var website=data.person.website;
18                 var email=data.person.email;
19                 $("#details").empty()
20                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
21                     .append("<a href='"+website+"'>"+website+"</a>");
22             },"json");
23             return false;
24         });
25     });
26 </script>
27 </head>
28 <body>
29     <h1>People</h1>
30     <ul>
31         <li><a href="files/andy.js">Andy</a></li>
32         <li><a href="files/richard.js">Richard</a></li>
33         <li><a href="files/jeremy.js">Jeremy</a></li>    
34     </ul>
35     <div id="details"></div>
36 </body>
37 </html>