1.jquery中的ajax

　　

二：load

2.load方法

　　

3.load测试程序大纲

　　

4.load测试程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $("a").click(function(){

             //去缓存的方式

             var url=this.href;

             var args={"time":new Date()};

             $("#content").load(url,args);

             return false;

         });

     });

 </script>

 </head>

 <body>

     <a href="helloAjax.txt">Hello Click</a>

     <div id="content"></div>

 </body>

 </html>

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

　　

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     @import url("clearleft.css");

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $("a").click(function(){

             var url=this.href;

             var args={"time":new Date()};

             $("#details").load(url,args);

             return false;

         })

     });

 </script>

 </head>

 <body>

     <h1>People</h1>

     <ul>

         <li><a href="files/andy.html">Andy</a></li>

         <li><a href="files/richard.html">Richard</a></li>

         <li><a href="files/jeremy.html">Jeremy</a></li>

     </ul>

     <div id="details"></div>

 </body>

 </html>

7.效果

　　效果如以前。

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

　　

三：get与post

1.介绍

　　

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     @import url("clearleft.css");

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $("a").click(function(){

             var url=this.href;

             var args={"time":new Date()};

             $.get(url,args,function(data){

                 var name=$(data).find("name").text();

                 var website=$(data).find("website").text();

                 var email=$(data).find("email").text();

                 $("#details").empty()

                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                     .append("<a href='"+website+"'>"+website+"</a>");

             });

             return false;

         })

     });

 </script>

 </head>

 <body>

     <h1>People</h1>

     <ul>

         <li><a href="files/andy.xml">Andy</a></li>

         <li><a href="files/richard.xml">Richard</a></li>

         <li><a href="files/jeremy.xml">Jeremy</a></li>

     </ul>

     <div id="details"></div>

 </body>

 </html>

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

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

四：getJSON

1.针对json格式的程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     @import url("clearleft.css");

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $("a").click(function(){

             var url=this.href;

             var args={"time":new Date()};

             $.getJSON(url,args,function(data){

                 var name=data.person.name;

                 var website=data.person.website;

                 var email=data.person.email;

                 $("#details").empty()

                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                     .append("<a href='"+website+"'>"+website+"</a>");

             });

             return false;

         });

     });

 </script>

 </head>

 <body>

     <h1>People</h1>

     <ul>

         <li><a href="files/andy.js">Andy</a></li>

         <li><a href="files/richard.js">Richard</a></li>

         <li><a href="files/jeremy.js">Jeremy</a></li>

     </ul>

     <div id="details"></div>

 </body>

 </html>

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     @import url("clearleft.css");

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $("a").click(function(){

             var url=this.href;

             var args={"time":new Date()};

             $.get(url,args,function(data){

                 var name=data.person.name;

                 var website=data.person.website;

                 var email=data.person.email;

                 $("#details").empty()

                     .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                     .append("<a href='"+website+"'>"+website+"</a>");

             },"json");

             return false;

         });

     });

 </script>

 </head>

 <body>

     <h1>People</h1>

     <ul>

         <li><a href="files/andy.js">Andy</a></li>

         <li><a href="files/richard.js">Richard</a></li>

         <li><a href="files/jeremy.js">Jeremy</a></li>

     </ul>

     <div id="details"></div>

 </body>

 </html>

005 Ajax中使用jquery实现三种格式的信息的更多相关文章

  1. Notepad++中Windows,Unix,Mac三种格式

    Notepad++中Windows,Unix,Mac三种格式之间的转换 http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htm ...

  2. 【转】Notepad++中Windows,Unix,Mac三种格式之间的转换

    原文网址:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_func_windows_unix_mac.ht ...

  3. SIM卡中UCS2编码的三种格式（80,81,82）分析

    网上看到一篇比较好的说ucs2编码的文章,保存一下,原文地址: http://hi.baidu.com/youren4548/blog/item/fa08bd1bf61005058618bf1d.ht ...

  4. 3.13. Notepad++中Windows,Unix,Mac三种格式之间的转换

    由于历史原因,导致Windows,Unix/Linux,Mac三者之间,对于文件中所用回车换行符,表示的方法,都不一样. 这就导致了很多人都会遇到回车换行符的困惑,和需要在不同格式间进行转换. 其中, ...

  5. ajax数据提交数据的三种方式和jquery的事件委托

    ajax数据提交数据的三种方式 1.只是字符串或数字 $.ajax({ url: 'http//www.baidu.com', type: 'GET/POST', data: {'k1':'v1'}, ...

  6. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  7. AJAX实现跨域的三种方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...

  8. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  9. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

随机推荐

  1. go build 不同系统下的可执行文件

    Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. 1.Mac下编译Linux, Windows平台的64位可执行程序: 1 2 $ CGO_ENABLED=0 GOOS=linu ...

  2. gson转换对象为json字符串时对特殊字符编码的问题

    使用google的gson进行object和json的转换,如下: public static String object2json(Object obj) { Gson gson = new Gso ...

  3. POJ No 3259 Wormholes Bellman-Ford 判断是否存在负图

    题目:http://poj.org/problem?id=3259 题意:主要就是构造图, 然后判断,是否存在负图,可以回到原点 /* 2 3 3 1 //N, M, W 1 2 2 1 3 4 2 ...

  4. BFS搜索：POJ No 3669 Meteor Shower

    #include <iostream> #include <cstring> #include <queue> #include <cstdio> #i ...

  5. c# 判断一个数是不是质数或者求一个数的公约数的算法

    一个数是不是质数,就是判断一个数除了1和它本身还有没有其他的约数,如果有则是合数,否则是质数.其实本质都是求公约数. 求公约数是什么思路呢,就是找比它小的数不断尝试,能被整除则是其约数,否则继续尝试, ...

  6. 《编写高质量代码：改善JavaScript程序的188个建议》学习小记（二）

    建议3:减少全局变量污染 1.把多个全局变量都追加在一个名称空间下,将显著降低与其他应用程序产生冲突的概率,应用程序也会变得更容易阅读. var My = {}; My.name = { " ...

  7. Centos7系统中安装Nginx1.8.0

    Nginx的安装 tar -zxvf nginx-1.8.0.tar.gz cd nginx-1.8.0 ./configure make make install /usr/local/nginx/ ...

  8. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  9. GridView Postback后出错Operation is not valid due to the current state of the object.

    一.问题起因 最近项目中有一页面第一次search后正常,但是再次点击其它任何按钮都会报错,亦即postback后页面有问题,经检查是由于页面有一GridView且数据量极大,记录大概有上千条,这儿解 ...

  10. 【洛谷题解】P2303 [SDOi2012]Longge的问题

    题目传送门:链接. 能自己推出正确的式子的感觉真的很好! 题意简述: 求\(\sum_{i=1}^{n}gcd(i,n)\).\(n\leq 2^{32}\). 题解: 我们开始化简式子: \(\su ...