jquery系列教程6-ajax的应用全解

点击打开：
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全

官网参考:https://www.jquery123.com/jQuery.ajax/
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的keyfield.value;   //JSON的值
});//$.param()方法,序列化数组或映射
var obj={a:1,b:2,c:3};
var k= $.param(obj);                                            //转化为a=1&b=2&c=3

jquery系列教程6-ajax的应用全解相关推荐

js系列教程12-浏览器存储全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
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系列教程5-动画操作全解
点击打开: 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-事件 ...
你想要的系列：网络请求框架OkHttp3全解系列 - （二）OkHttp的工作流程分析
Okhttp系列文章: 你想要的系列:网络请求框架OkHttp3全解系列 - (一)OkHttp的基本使用你想要的系列:网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析你想 ...
ES6系列教程第四篇--asyn详解
一.什么是async async其实是ES7的才有的关键字,放在这里说,其实是和我们前面所说的Promise,Generator有很大关联的.async的意思是"异步",顾名思义是 ...

jquery系列教程6-ajax的应用全解

官网参考:https://www.jquery123.com/jQuery.ajax/
jquery中ajax的应用详解：

jquery系列教程6-ajax的应用全解相关推荐

最新文章

热门文章

jquery系列教程6-ajax的应用全解

官网参考:https://www.jquery123.com/jQuery.ajax/ jquery中ajax的应用详解：

jquery系列教程6-ajax的应用全解相关推荐

最新文章

热门文章

官网参考:https://www.jquery123.com/jQuery.ajax/
jquery中ajax的应用详解：