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. 两个button之间的间距如何去掉

    在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉

  2. mysql数据库脚本改为oracle脚本

    前段时间公司项目数据库需要从mysql转为oracle,所以需要修改下原有的mysql脚本. 有两种方式:第一种,使用工具进行两种数据库的转换.第二种,手动修改数据库脚本. 第二种方法很笨,但能学习下 ...

  3. android获取APP 包名和activity

    1.连接设备并启动被测试app应用 2.打开cmd窗口 3.windows获取包名和activity    adb shell dumpsys activity |find "mFocuse ...

  4. Gulp安装笔记

    前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  5. Docker 初相见

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...

  6. Eclipse升级后导入插件的方法

    昨天把eclipse 从 indigo(3.7) 升级到了 juno(4.2). 启动 eclipse 发现从前装的 android 和 maven 插件都不见了. $ ls .eclipse/ or ...

  7. BZOJ4816 数字表格

    4816: [Sdoi2017]数字表格 Time Limit: 50 Sec  Memory Limit: 128 MB Description Doris刚刚学习了fibonacci数列.用f[i ...

  8. HTML字体的设置

    CSS字体设置 box-sizing:border #content-box   box-shadow:设置盒子边框的阴影.     字体动作:   font-family:设置字体.比如:‘微软雅黑 ...

  9. python正则表达式-re模块的爱恨情仇

    利用python的re模块,使用正则表达式对字符串进行处理 # 编辑者:闫龙 import re restr = "abccgccc123def456ghi789jgkl186000&quo ...

  10. Linux下inittab文件详解

    /etc/inittab文件详解 Linux系统的启动过程为:加电自检-->根据BIOS中的设置从指定的设备启动-->找到设备MBR中的bootloader引导启动系统-->启动ke ...