读jquery 权威指南[4]-Ajax
一、获取异步数据
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相关推荐
- 读jquery 权威指南[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
- 读jQuery 权威指南[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...
- 读jQuery 权威指南[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each--遍历 $.each(obj,function(param1,pa ...
- 读jquery 权威指南[2]-事件
1. 事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件--bind(type,[data],function) ty ...
- 读jquery 权威指南[3]-动画
一. 显示与隐藏--hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
- 跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
- 陶国荣著JQuery权威指南PDF
JQuery权威指南 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.学习网页设计中会遇到JQuery的一些特效,由51RGB小编整理的一个关于JQuery权威指 ...
- jQuery权威指南(第2版)
为什么80%的码农都做不了架构师?>>> jQuery权威指南(第2版) 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.内容新颖,基于j ...
- jQuery权威指南(第2版)pdf
下载地址:网盘下载 作者简介 · · · · · · 资深Web技术专家,有10余年开发经验,是国内较早专业从事Web开发的一线技术人员和培训讲师.长期致力于HTML 5.JavaScript.CS ...
最新文章
- 技术转管理的成功率不到70%!你必须先迈过这9道坎...10页PPT详解
- # vue.js 之 对vue.js基础理解
- 多租户数据库性能测试手册
- 【控制】《鲁棒控制-线性矩阵不等式处理方法》-俞立老师-第8章-鲁棒方差控制
- 避障机器人程序c语言,基于51单片机小车寻迹、避障源程序(注释很详细)
- Stanford UFLDL教程 栈式自编码算法
- 最小的linux内核编译,Linux最小内核移植
- Python进行数据分析—可视化之seaborn
- JAVA Servlet API简介及接口与类的用法
- 在Windows下编译ffmpeg完全手册
- 东方通 启动服务访问不到_使用金万维宽带通动态域名服务实现速达3000异地访问...
- Eclipse用法和技巧十四:自动生成的TODO注释2
- 如何才能写出“高质量”的代码?
- 第一章 硬件介绍和环境配置
- pythonp2p网络_python Socket网络编程实现C/S模式和P2P
- 支付宝宣布刷脸支付将全面接管扫码支付
- 随机过程之更新理论的应用
- Mahony 互补滤波
- 【计算理论】计算理论总结 ( 非确定性有限自动机 NFA 转为确定性有限自动机 DFA ) ★★
- matlab中怎么正弦计算,matlab计算结果中的正弦余弦问题
热门文章
- 全国python一级考试_关于全国青少年软件编程(Python)等级考试试卷(一级)测试卷情况网络调研...
- python里安装mysql有错_尝试在Python3.4上安装MySQL时出错
- python 递归函数_Python教程系列之递归函数与匿名函数调用
- java字节对齐原则_C struct 中字节对齐问题
- 20190824:(leetcode习题)报数
- 32怎么将mcu内的代码擦除_8位和32位MCU该如何选择?
- 清华又出一个姚班!人工智能班成立,姚期智担任首席教授,首批招生30人
- 马斯克圣诞节晒太空飞船:明年4月测试,5年后飞火星
- 她,18岁,李飞飞三度公开表扬,高中时NIPS获奖,创造「AI手术教练」
- 谷歌有只AI,自动给黑白视频上色,走到哪它都认识你