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. bzoj千题计划159:bzoj2055: 80人环游世界(有源汇上下界可行最小费用流)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2055 某个国家必须经过vi次, 可以转化为上下界都为vi的边 对这张图做有源汇上下界可行最小费用流 ...

  2. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  3. 字符加密 cipher

    评测传送门 Description: Valentino 函数的定义: 对于一个由数字和小写字母组成的字符串 S,两个整数 K,M,将 S 视为一个 P 进制数,定义: Valentino(S, K, ...

  4. 【TortoiseSVN】windows中连接SVN服务器的工具

    1.下载安装包: 可以到我的服务器地址进行下载,有32和64位的安装包: http://qiaoliqiang.cn/fileDown/TortoiseSVN-1.8.8.25755-win32-sv ...

  5. Linux触摸屏驱动测试程序范例【转】

    转自:http://blog.sina.com.cn/s/blog_4b4b54da0102viyl.html 转载2015-05-09 16:28:27 标签:androiditlinux 触摸屏驱 ...

  6. aarch64_p2

    perl-Crypt-URandom-0.36-6.fc26.noarch.rpm 2017-02-12 07:17 16K fedora Mirroring Project perl-Crypt-X ...

  7. python 结构化数据解析

    # -*- coding: utf-8 -*- # @Time : 2018/8/31 14:32 # @Author : cxa # @File : glomtest.py # @Software: ...

  8. http://s22.app1105796624.qqopenapp.com/

    http://s22.app1105796624.qqopenapp.com/ http://121.43.114.69/xiyou/app/js/ac_tx.js http://hiyouba.co ...

  9. pip install 升级时候 出现报asciii码错误的问题。

    原因是pip安装python包会加载我的用户目录,我的用户目录恰好是中文的,ascii不能编码.解决办法是: python目录 Python27\Lib\site-packages 建一个文件site ...

  10. An overview of gradient descent optimization algorithms (更新到Adam)

    Momentum:解快了收敛速度,同时也减弱了SGD的波动 NAG: 减速了Momentum更新参数太快 Adagrad: 出现频率较低参数采用较大的更新,对于出现频率较高的参数采用较小的,不共用一个 ...