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. C++程序运行时间测定

    From:http://www.cnblogs.com/killerlegend/p/3877703.html Author:KillerLegend Date:2014.7.30 此处程序的测试时间 ...

  2. 3.Filter和interceptor的区别

    https://blog.csdn.net/qq_36411874/article/details/53996873

  3. [转载]mysql下载安装

    转自https://www.cnblogs.com/tyhj-zxp/p/6693046.html 下载 打开:https://www.mysql.com/downloads/ 1.点击该项:

  4. 机器学习算法整理（一）线性回归与梯度下降 python实现

    回归算法 以下均为自己看视频做的笔记,自用,侵删! 一.线性回归 θ是bias(偏置项) 线性回归算法代码实现 # coding: utf-8 ​ get_ipython().run_line_mag ...

  5. Docker中执行Shell出现乱码

    问题描述 最近遇到一个问题: 执行命令 docker exec f4af9b sh -c 'bash /tmp/build.sh' 命令在docker中执行shell,会出现中文乱码的问题.但是在do ...

  6. 最佳的MongoDB客户端管理工具

    <最佳的MongoDB客户端管理工具> 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 一个好的MongoD ...

  7. [整理]VS2010中如何添加“依赖","库目录","包含目录"

    VS2010中如何添加“依赖","库目录","包含目录" 1. 添加编译所需要(依赖)的 lib 文件[解决方案资源管理器]“项目->属性-&g ...

  8. 在Emacs中画思维导图

    是的,你没有看错.其实,不只画思维导图,画结构图.流程图等,都可以.那怎么办呢?就是借助 Graphviz . Graphviz 可以方便地表达概念之间的联系,因此用它画思维导图是可行的,再加上它是个 ...

  9. MySQL中JSON字段的使用技巧

    mysql5.7.8之后开始原生支持json. 在类似mongodb这种nosql数据库中,json存储数据是非常自然的, 在mysql中合理的使用json,能够带来极大的便利 Json字段的使用场景 ...

  10. CodeForces 816C 思维

    On the way to school, Karen became fixated on the puzzle game on her phone! The game is played as fo ...