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. java 修饰符总结

    java中的修饰符分为类修饰符,字段修饰符,方法修饰符.根据功能的不同,主要分为以下几种.    1.权限访问修饰符    public,protected,default,private,这四种级别 ...

  2. bzoj千题计划111：bzoj1021: [SHOI2008]Debt 循环的债务

    http://www.lydsy.com/JudgeOnline/problem.php?id=1021 如果A收到了B的1张10元,那么A绝对不会把这张10元再给C 因为这样不如B直接给C优 由此可 ...

  3. 写一个shell脚本利用wget抓取股票历史数据

    今天,大数据部老大交给我一项任务——抓取股票历史数据.于是乎,我自行在网上找了一下,发现wget真真是一个非常强大的linux下载工具.我已经被深深震撼到了.下面叙述今天的一些过程,还是比较坎坷的. ...

  4. 图片src拼接后台返回ID

    本文地址:http://www.cnblogs.com/veinyin/p/8507403.html  在学习 CSS 时只了解了给固定地址,但是如果给的是一个需要拼接的地址就蒙了,以下是基于 Vue ...

  5. 容斥原理&&莫比乌斯专题

    A题:A - Eddy's爱好   HDU - 2204 具体思路:如果是求n中,为平方数的有多少个,那么答案肯定是sqrt(n),同理,如果是三次根号的话,那么答案肯定是n的三分之一次方.然后继续按 ...

  6. PCI学习之总线原理01

    -----------以下资料由网络资料整理而成-------- PCI即Peripheral Component Interconnect,中文的意思是“外围器件互联”. PCI总线支持32位和64 ...

  7. Linux学习笔记-文件系统和基本命令

    目录 分区设备文件名 分区 挂载 文件目录 文件处理命令 目录处理命令 硬件设备文件名 IDE硬盘 /dev/hd[a-d] USB硬盘 /dev/sd[a-p] 光驱 /dev/cdrom或者/de ...

  8. asp.net 伪静态实现（UrlRewritingNet）

    UrlRewritingNet.UrlRewriter源码地址 https://github.com/aspnetde/UrlRewritingNet部署步骤: 步骤一: <!--只允许存在一个 ...

  9. 使用Cache缓存

    存放位置:服务器内存,用于频繁访问且不轻易更改的内容缓存. string CacheKey = "CT1"; //检索指定项, object objModel = Cache.Ge ...

  10. 畸形的 dockerfile中的COPY命令-

    dockerfile中的COPY是指COPY 指定目录的“子级目录”下所有的目录和文件,到指定目录中,这个shell中的cp命令大相径庭,使得很多人纳闷,怎么cpy过去的文件不是自己想要的