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

时间:2021-10-23 09:24:16

点击打开:

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的应用全解的更多相关文章

  1. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  2. jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  3. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  4. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  5. jquery系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  6. jQuery Mobile 所有class选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

  7. Cobalt Strike系列教程第二章:Beacon详解

    上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...

  8. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  9. [js高手之路] es6系列教程 - 函数的默认参数详解

    在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...

随机推荐

  1. "NHibernate.Exceptions.GenericADOException: could not load an entity" 解决方案

     今天,测试一个项目的时候,抛出了这个莫名其妙的异常,然后就开始了一天的调试之旅... 花了很长时间,没有从代码找出任何问题... 那么到底哪里出问题呢? 根据下面那段长长的错误日志: -- ::, ...

  2. mybatis : trim标签, “等于==”经验, CDATA标签 ,模糊查询CONCAT,LIKE

    一.My Batis trim标签有点类似于replace效果. trim 属性, prefix:前缀覆盖并增加其内容 suffix:后缀覆盖并增加其内容 prefixOverrides:前缀判断的条 ...

  3. win10 64位安装memcache扩展和开启redis扩展

    前面有关于win10下搭建wamp环境的介绍,在此不在赘述,php操作memcache有memcache库和memcached库,其中memcache是php内置的扩展库,支持面向对象和面向过程两种操 ...

  4. tomact的work目录

    1.  用tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序(发布到tomcat的项目里含的类,会被编译成.class后才发布过来,源文件没有发布过来,但这里的j ...

  5. EXCEL IF 函数 模糊查询

    A列都是产品名,比如衬衫,长袖衬衫,短袖衬衫,短裙,长裙 搜索A列的产品名,凡是含有“衬衫”的一律在B列对应行输出“衬衫”,凡是含有“裙”字的一律输出“裙子”在B列对应行,请教一下怎么写函数,本来用I ...

  6. javascript 规范

    关于变量及方法等的命名,没有硬性规定,但是为了规范,遵循一些约定还是有必要的. 变量定义: 用var 关键字将要使用的变量定义在代码开头,变量间用分号隔开. 原因有二: 一是便于理解,知道下面的代码会 ...

  7. _jobdu_1384:二维数组中的查找

    /************************************************************************/ /* 题目描述: 在一个二维数组中,每一行都按照从 ...

  8. Thinkphp 不显示生成的验证码 【转载】

    在调用验证码之前加上 ob_clean(); 不显示验证码的代码: public function verify(){ $verify = new \Think\Verify(); $verify-& ...

  9. [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置

    原文地址:http://blog.csdn.net/lovelyelfpop/article/details/40780111 Phonegap/Cordova项目中的config.xml文件.里面配 ...

  10. 玩转Web之servlet(四)---B/S是怎样使用http协议完毕通信过程的

    在上一篇文章中,我简单的说了一下B/S架构的流程图,关于浏览器和server之间的通信过程知识含糊的说了一下,在这篇文章中我再总结一下B/S架构里是怎样利用http协议去完毕通信的. (一)通讯过程 ...