005 Ajax中使用jquery实现三种格式的信息
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实现三种格式的信息的更多相关文章
- Notepad++中Windows,Unix,Mac三种格式
Notepad++中Windows,Unix,Mac三种格式之间的转换 http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htm ...
- 【转】Notepad++中Windows,Unix,Mac三种格式之间的转换
原文网址:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_func_windows_unix_mac.ht ...
- SIM卡中UCS2编码的三种格式(80,81,82)分析
网上看到一篇比较好的说ucs2编码的文章,保存一下,原文地址: http://hi.baidu.com/youren4548/blog/item/fa08bd1bf61005058618bf1d.ht ...
- 3.13. Notepad++中Windows,Unix,Mac三种格式之间的转换
由于历史原因,导致Windows,Unix/Linux,Mac三者之间,对于文件中所用回车换行符,表示的方法,都不一样. 这就导致了很多人都会遇到回车换行符的困惑,和需要在不同格式间进行转换. 其中, ...
- ajax数据提交数据的三种方式和jquery的事件委托
ajax数据提交数据的三种方式 1.只是字符串或数字 $.ajax({ url: 'http//www.baidu.com', type: 'GET/POST', data: {'k1':'v1'}, ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
随机推荐
- H5离线存储-manifest
起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐 ...
- Nginx跳转Tomcat
conf配置: server { listen 80; server_name www.-------.com; server_name_i ...
- 查看和修改linux系统时间
一.查看和修改Linux的时区1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区方法 A 命令 : "tzselect" 方法 ...
- Linux启动的流程
2017年1月10日, 星期二 Linux启动的流程 null
- HDU 1846 Brave Game 巴什博奕
解题报告:Alice和Bob在做一个取石子游戏,有一堆n个石子,然后规定每个人每次最少要去1个石子,最多可以取m个石子,最后一次取完石子的人为胜. 巴什博奕,关键是找到必胜点和必败点,我们可以先列举出 ...
- 【leetcode 简单】 第一百零八题 找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不 ...
- Linux Shell管道调用用户定义函数(使shell支持map函数式特性)
Linux中有一个管道的概念,常用来流式的处理文本内容,比如一个文件对其中的每一行应用好几个操作,出于两个方面的考虑可能需要在管道中使用用户定义函数: 1. 刚需: 内置的sed/awk之类的可能没法 ...
- ubuntu安装Android Studio开发环境
1.下载 https://developer.android.com/studio/ 2.解压文件,将文件夹copy到/opt/ 3.进入/opt/android-studio/bin,运行./stu ...
- vuejs心法和技法
原文地址:http://www.cnblogs.com/kidsitcn/p/5409994.html 所有的vuejs组件都是被扩展的vue实例: var MyComponent = Vue.ext ...
- Struts2笔记3--获取ServletAPI和OGNL与值栈
获取ServletAPI: 第一种方式: //在request域中放入属性req,暂且认为getContext()获取的是request域空间,但实际不是 ActionContext.getConte ...