一、获取异步数据

jQuery可以从服务器异步获得静态数据。

①load()

$.load(url,data,callback)

  • url要加载的页面地址,
  • data发送到服务器的数据key/value格式,
  • callback表示加载成功后返回到加载页面的回调函数。

其中url中还可以过滤页面元素。

<script type="text/javascript">
$( function () {
$( "#Button1").click(function () { //按钮点击事件
$( "#divTip").load("a.html .aa" ); //load()方法加载数据
});
})
</script>

a.html代码为:

<div class="clsShow">test</div>
<div class="clsShow aa">test1</div>

②getJSON()

方法:$.getJSON(url,data,callback):获取.json格式的数据并进行处理。

参数:url要加载的页面地址,data发送数据,callback回调函数。
news.js

[
{
"title": "新天龙八部要停播",
"date":"2014-1-26"
},
{
"title": "我是歌手你喜欢谁",
"date":"2014-1-24"
}
]

html:

<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button"
class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#Button1").click(function () {
$.getJSON("news.js", function (data) {
var html = "";
$.each(data, function (index, item) {
html += (index + 1);
html += "标题:" + item.title + "<br/>";
html += "日期:" + item.date + "<br/>";
});
$("#divTip").html(html);
});
});
});
</script>

③getScript()

$.getScript(url,callback):获取js文件并自动执行注入的脚本。

参数:url为要加载的js文件地址,callback为回调函数。

实例:

news1.js:

var data = [
{
"title": "新天龙八部要停播",
"date": "2014-1-26"
},
{
"title": "我是歌手你喜欢谁",
"date": "2014-1-24"
}
];
$.each(data,function () {
var html = "";
$.each(data, function (index, item) {
html += (index + 1);
html += "标题:" + item.title + "<br/>";
html += "日期:" + item.date + "<br/>";
});
$("#divTip").html(html);
});

调用:

$(function () {
$("#Button1").click(function () {
$.getScript("news1.js");
});
});

二、请求服务器数据——$.get,$.post

①方法

  • $.get(url,[data],[callback],[type])
  • $.post(url,[data],[callback],[type])

参数说明:url是要请求的数据地址;data是表示发送到服务器的地址是key/value格式;callback表示请求成功后执行的回调函数;type是返回数据的格式,如html、json、xml等。

注意:data中如果包含中文格式,要使用encodeURI()方法进行转码;在客户端接收数据时要使用decodeURI()方法进行解码。

②差别:

$.get和$.post方法差别不大,主要差别在以下两点:

  • $.get不适合传递数据量较大的数据,$.post无此限制。
  • $.get请求的结果会缓存到浏览器中,而$.post结果不会浏览器缓存。

③实例:

<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件,并通过回调函数返回服务器响应后的数据
$.get("UserInfo.aspx",
{ name: encodeURI($("#txtName").val()) },
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>

三、$.ajax

①方法

$.ajax([options])是比较底层的异步调用方法。参数options是key/value格式的,既包含发送请求的设置,也包含相应后的回调数据。

需要注意的是跨域调用时要使用Jsonp方式。

②ajax中的全局事件

实例:

<script type="text/javascript">
$(function() {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("已成功获取数据。").hide();
})
//按钮的单击事件
$("#Button1").click(function() {
$.ajax({ //带参数请求服务器
type: "GET",
url: "GetData.aspx",
//获取加码后的数据并作为参数传给服务器
data: { txtData: encodeURI($("#txtData").val()) },
dataType: "html",
success: function(data) { //显示解码后的返回数据
$("#divTip").html(decodeURI(data));
}
})
})
})
</script>

读<jquery 权威指南>[4]-Ajax的更多相关文章

  1. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  2. 读<jquery 权威指南>[3]-动画

    一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...

  3. 读<jQuery 权威指南>[5]-插件

    一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...

  4. 读<jQuery 权威指南>[6]--实用工具函数

    官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...

  5. 读<jquery 权威指南>[7]-性能优化与最佳实践

    一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...

  6. 读<jquery 权威指南>[2]-事件

    1.  事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件——bind(type,[data],function) ty ...

  7. 跟小静读《jQuery权威指南》——目录

    前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...

  8. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  9. [在读] javascript权威指南第六版

    耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^

随机推荐

  1. ubuntu 下安装 wxpython2.8

    echo "deb http://archive.ubuntu.com/ubuntu wily main universe" | sudo tee /etc/apt/sources ...

  2. background-clip,background-origin

    开门见山,简单来说 background-origin定义了background的绘制区域(就是从什么地方开始绘制),三个属性 padding-box 背景图像相对于内边距框来绘制border-box ...

  3. mssql手工注入及绕过术

      报错注入: - 例子:http://www.kfgtfcj.xxx.cn/lzygg/Zixun_show.aspx?id=1 [1]首先爆版本:http://www.kfgtfcj.xxx.cn ...

  4. Java:String和Date、Timestamp之间的转

    Java:String和Date.Timestamp之间的转 一.String与Date(java.util.Date)互转 1.1 String -> Date String dateStr  ...

  5. Application.DoEvents():概念

    When you run a Windows Form, it creates the new form, which then waits for events to handle. Each ti ...

  6. mac上安装Navicat Premium 破解版+汉化包

    Navicat是一款非常强大的sql分析管理工具.以前一直在windows上面使用. 由于工作的需要,我也是折腾出了这不易的mac破解版.下了好多网上的版本,亲测这个可用. 俗话说:工欲善其事,必先利 ...

  7. LeetCode----326. Power of Three(Java)

    package isPowerOfThree326; /* Given an integer, write a function to determine if it is a power of th ...

  8. zigbee学习之路(一):zigbee介绍

    一.前言 大家好,我是一名在校的大学生,最近对zigbee非常感兴趣,于是自己从网上买了一款秉火cc2530的zigbee开发板,想通过这个平台来和大家分享自己学习和研究的经历,下面就来简单的介绍下z ...

  9. mysql show status

    在LAMP架构的网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL ...

  10. C++开源大全

    程序员要站在巨人的肩膀上,C++拥有丰富的开源库,这里包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++ Standard Library:是一系列 ...