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. vsCode开发java遇到的问题整理、解决方案（持续更新）

    获取控制台输入的信息: 休息launch.json文件中的console属性internalConsole(内部控制台)修改为externalTerminal(外部控制台)即可正常获取输入信息,代码如 ...

  2. Tomcat——Tomcat使用详解

    Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...

  3. html中一些莫名的空格

    我们日常用编辑器编辑代码的时候,为了让代码的可读性更高,通常会有换行,空格或者tab键(bootstrap的规则中非常不建议这样做,不过为了方便,我还是比较习惯这样来缩进)的操作. 而这些也就造成了一 ...

  4. 用 Love2D 实现法线贴图的例程(到最新版本 0.10.1)

    用 Love2D 实现法线贴图的例程(到最新版本 0.10.1) 概述 一般来说, 复杂的光照模型会被用在 3D 游戏中, 以产生逼真的效果, 不过也有些开发者研究出一些代码可以在 2D 游戏中使用这 ...

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

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

  6. spring——获取ClassLoader

    org.springframework.util包下的ClassUtils类有个静态方法:getDefaultClassLoader() 可以获取当前类加载器,如下: public static Cl ...

  7. 【leetcode 简单】 第七十九题 区域和检索 - 数组不可变

    给定一个整数数组  nums,求出数组从索引 i 到 j  (i ≤ j) 范围内元素的总和,包含 i,  j 两点. 示例: 给定 nums = [-2, 0, 3, -5, 2, -1],求和函数 ...

  8. 去除zabbix calculate 模式下，有时候分母为零的情况(Cannot evaluate expression: division by zero. )

    zabbix的监控类型支持一种calculate的方式,可以对几个item结果进行简单的计算,但有时会出现分母为零的情况,这时候监控项就会报错 Cannot evaluate expression: ...

  9. boost::bind的使用

    最近在几经波折之后,终于对于boost::bind有点理解了.对于习惯了其他语言的人来说,boost::bind是个挺神奇的东西,它可以将你的方法适配成任何其他的方法.其实这得益于c++的模板以及操作 ...

  10. C# 应用程序配置文件App.Config和web.config

    应用程序配置文件,对于asp.net是 web.config,对于WINFORM程序是 App.Config(ExeName.exe.config). 配置文件,对于程序本身来说,就是基础和依据,其本 ...