jquery系列教程6-ajax的应用全解
点击打开:
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
jquery中ajax的应用详解:
jquery在ajax上的应用包括三个层次。
最底层$.ajax()
第2层load(),$.get(),$.post(),
第3层$.getScript(),$.getJSON()。
getScript()
动态加载js文件
$.getScript("index5.js",function(){
alert("载入完成");
});
getJSON()
动态加载json文件
$.getJSON("test.JSON",function(data){ //data为返回的数据
$.each(data.myback,function(commentindex,comment){ //$.each遍历数组和对象,commentindex对象成员或数组索引,comment对应变量或内容
return false; //返回false即可退出each函数
});
});
load()
//$(selector).load(URL,data,callback)函数通常来获取服务器的静态文件,URL中可以添加选择器进行筛选。
$("#div1").load("data/demo_test.html #p1",function(){ //将远程文件的内容中的id=p1的元素加载到div1中,并调用回调函数。
});
$("#div1").load("test.jsp",{name:"name1",age:"22"},function(responseTxt,textStatus,XMLHttpRequest){ //可以向远程路径传递参数,返回数据,load的发送方式就根据有无数据决定,有数据就是post方式,没有就是get方式
//responseTxt; //请求返回的内容
//textStatus; //请求状态 success、error、notmodified、timeout
//XMLHttpRequest; //XMLHttpRequest对象
});
get和post发送数据的方式不同,但是在jquery的ajax中这种区别对用户不可见。get传输的数据大小有限制,get请求的数据会被浏览器缓存,两种方式在服务器端的接收不同。
get()
//$.get(URL,data,callback,type);
$.get("web.jsp",{
name:"name1", //get方法中的数据不仅可以是映射方法,也可以是"name=name1&age=12"的字符串方式,
age:"12" //如果有中文,要使用编码,"name="+encodeURIComponent("栾鹏")+"&age=12"
},function(data,textStatue){ //data表示返回的内容,可以是xml,JSON文件,HTML片段。textStatus表示请求状态:sucess,error,notmodified,timeout4种
$("#div1").html(data); //如果是html片段,直接设置代码段
username = $(data).find("comment").attr("username"); //如果是xml文档,则使用$转化为dom对象
username = data.username; //如果是json数据,当成对象使用
});
post()
//$.post(URL,data,callback);
$.post("web.jsp", $("#form1").serialize(), //serialize序列化表单内容,作为jQuery的表单对象的函数。
function(data,textStatue){ //data表示返回的内容,可以是xml,JSON文件,HTML片段。textStatus表示请求状态:sucess,error,notmodified,timeout4种
$("#div1").html(data); //如果是html片段,直接设置代码段
username = $(data).find("comment").attr("username"); //如果是xml文档,则使用$转化为dom对象
username = data.username; //如果是json数据,当成对象使用
});
ajax()
//通用的ajax函数
$.ajax(options)
$.ajax({
type:"POST", //方式
url:"test.jsp", //地址
dataType:"JSON", //数据类型 xml(xml文档),html(html代码),script(js代码),json(json数据),jsonp(jsonp格式数据),text(纯文本)
beforeSend:function(XMLHttpRequest){ //发送前函数, 这里可以修改XMLHttpRequest,例如添加HTTP头
},
complete:function(XMLHttpRequest,textStatus){ //请求完成函数 //请求成功或失败均调用此函数
},
sucess:function(data,textStatus){ //请求成功,成功返回, //data有可能是xmlDoc,jsonObj,html,text等等
},
error:function(XMLHttpRequest,textStatus,errorThrown){ //请求失败函数
},
global:true //是否触发全局ajax事件,默认为true。全局函数开启,任何jquery类能调用后面的ajax全局函数
});
全局ajax函数
任何jquery对象都可以调用全局ajax函数
$("#loading").ajaxStart(function(){}); //ajaxStart请求开,ajaxStop请求结束 ajaxComplete请求完成 ajaxError请求错误 ajaxSend发送请求前 ajaxSucess请求成功
序列化
serialize()序列化,将元素转化为xx=xx&xx=xx&xx=xx字符串形式,不仅能用于表单
$(":checkbox,:radio").serialize(); //只会将选中的值序列化
//serializeArray序列化dom元素,返回JSON格式数据
var fields = $(":checkbox,:radio").serializeArray();
$.each(fields,function(i,field){
field.key; //JSON的key
field.value; //JSON的值
});
//$.param()方法,序列化数组或映射
var obj={a:1,b:2,c:3};
var k= $.param(obj); //转化为a=1&b=2&c=3
jquery系列教程6-ajax的应用全解的更多相关文章
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jQuery Mobile 所有class选项,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
- Cobalt Strike系列教程第二章:Beacon详解
上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
- [js高手之路] es6系列教程 - 函数的默认参数详解
在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...
随机推荐
- group by 详解
1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...
- PHP初入,for循环使用
一: 找出100-999之间的所有"水仙花数".所谓水仙花数是指一个三位 数,各位数字的立方和等于该数本身.(如153次方=1的3次方+5的3次方+3的3次方)并输出这些数字 想想 ...
- Node.js中Async详解:流程控制
安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 流程控制: 简化九种常见的流程的处理 集合 ...
- java第二次实验
1. 本章学习总结 答:学会在java中使用函数调用. 学会在Java程序中使用函数,使程序层次更清晰. 使用StringBuilder代替string拼接,减少内存空间的占用. 使用BigDecim ...
- 《Java从入门到放弃》JavaSE入门篇:练习——单身狗租赁系统
今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...
- 初识ELF格式 ABI,EABI,OABI
尽管每天都在调用linux的elf文件做各种事,但却很少去了解他,最近尝试在orangepi上编译个elf到android手机上运行,因为两个CPU都是ARMv8的.结果运行失败了.遂查找原因.结果挖 ...
- Java学习笔记四---打包成双击可运行的jar文件
写笔记四前的脑回路是这样的: 前面的学习笔记二,提到3个环境变量,其中java_home好理解,就是jdk安装路径:classpath指向类文件的搜索路径:path指向可执行程序的搜索路径.这里的类文 ...
- MapReduce中Combiner规约的作用以及不能作为MR标配的原因
作用:在Mapper端对数据进行Combine归约处理,Combine业务逻辑与Reducer端做的完全相同.处理后的数据再传送到Reducer端,再做一次归约.这样的好处是减少了网络传输的数量.在M ...
- 添加事务后 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type available
今天遇到了一个奇怪的问题 在没添加事务之前 所有的代码都是好的 , 当我添加了事务之后, 代码报错 org.springframework.beans.factory.NoSuchBeanDef ...
- GitHub新手使用教学(从安装到使用)
一.安装Git for Windows(又名msysgit) 下载地址: https://git-for-windows.github.io/ 在官方下载完后,安装到Windows Explore ...