jquery-ui全汇@未来科技《从入门到精通》-third

jquery《从入门到精通》学习笔记
一个轻量级的前端框架
当前使用版本为1到3,所以很多新版本的api不会过多介绍
jquery的下载链接##https://jquery.com
项目链接##https://jquery.org
<原书分享>

1.事件处理
2.使用ajax
1.事件处理
JavaScript以事件驱动实现页面交互,事件驱动的核心:以消息为基础,以事件来驱动。例如,当浏览器加载文档完毕后,会生成一个事件;当用户单击某个按钮时,也会生成一个事件。虽然利用传统的avaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。
1.1 jquery事件处理基础
jquery在javascript基础上进一步封装了不同类型的事件模型,从而形成一种功能更强大,用法更优雅的“”jquery事件模型“”,jquery事件模型体现如下特征:
统一了事件处理中的各种方法。
允许在每个元素上为每个事件类型建立多个处理程序。
采用DOM事件模型中标准的事件类型名称。
统一了event事件对象的传递方法,并对event对象的常用属性和方法进行规范。为事件管理和操作提供统一的方法。
考虑到IE浏览器不支持事件流中的捕获型阶段,且开发者很少使用捕获型阶段,jQuery事件模型也没有支持事件流中的捕获型阶段。除了这一点区别外,jQuery事件模型的功能与DOM事件模型基本相似。
1.1.1绑定事件
jquery提供了四种事件绑定方式:bind(),live(),delegate(),on(),每种方式各有特点,明白了他们之间的异同点,就能够进行正确选择,从而写出优雅而容易维护的代码(如今版本3以及更高的版本不存在bind(),live(),delegate(),如今都用on()代替,所以我们就当做了解一下吧)
其相同点有如下。
(1)都支持单元素多事件的绑定,都支持空格相隔方式或者大括号替代方式。
(2)均是通过事件冒泡方式,将事件传递到document进行事件的响应。
其不同点有如下。
(1) bind()只能针对已经存在的元素进行事件的设置,但是live()、on()、delegate()均支持委派事件,即可以为未来新添加元素注册事件。
(2) bind0函数在jQuery1.7版本以前比较受推崇,jQuery1.7 版本出来之后,官方已经不推荐用bind(),替代函数为on()。on()可以代替live(), live()方法在jQuery 1.9版本已经被删除。
(3) live()与delegate()类似,但是live()在执行速度、灵活性和CSS选择器支持方面比delegate()弱。
(4) bind()支持jQuery版本1和版本2,在版本3中被弃用; live()支持 jQuery1.8-,高版本不再支持: delegate()支持 jQuery1.4.2+,在jQuery版本3中被弃用: on()支持jQuery1.7+。
总之,如果项目中引用jQuery为低版本,推荐用delgate(), 高版本jQuery可以使用on()来代替,在jQuery 3+版本中只支持on()。

1.bind()
bind()方法为匹配元素添加一个或者多个事件处理器,用法如下:

/*添加单个事件*/
$(function(){
   $(".btn-test").bind("click",function(){
    $(".container").slideToggle();
})
/*添加多个事件*/
 $(".btn-test").bind("mouseout click",function(){
    $(".container").slideToggle();
})
/*删除事件*/
 $(".btn-test").unbind("click");
})
/*
 bind(event,data,function)
*/
参数说明
event必需参数项, 添加到元素的一个或多个事件,如click、 dblclick等。可以设计单事件处理, 如$(selector).bind(“click” ,data,function);。可以设计多事件处理,此时需要使用空格分隔多个事件,如$(selector).bind(“click ,dbclic,kmouseout”,data,function);,这种方式较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一个函数的情况f,可以使用大括号语法灵活定义多个事件,如$(selector).bind({event:function,event2:function,…}),这种方式较为灵活,可以给事件单独绑定函数
data可选参数项,设计需要传递的参数
function必需参数项,当绑定事件发生时,需要执行的函数
childSelector必须参数项,指定需要注册事件的元素,一般为调用对象的子元素

2.live(event,data,function):匹配当前或未来的匹配元素添加一个或多个事件处理程序,参数说明如上

用法如上,如需详解可到哔哩哔哩,csdn,简书,百度及百度文库进一步了解,该方法可用on()代替,高版本不存在,

3.delegate(childselector,evnet,data,function):该方法为指定的元素,以及被选元素的子元素,添加一个或多个事件处理程序,并规定当这个事件发生时运行函数,使用dalegate()方法适用于当前或未来的元素,如由脚本创建的新元素等

$(function(){
   $("ul").delegate("li","click",function(){
     alert(this.innerHTML);
})
})

4.on(event.childSelector,data,function):方法为指定的元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用on()方法的事件处理程序使用于当前或未来的元素,如由脚本创建的新元素

$(function(){
   $("ul").on("click","li",function(){
     alert(this.innerHTML);
})
  $("ul").on("click","li",{a:"A",b:"B"},function(){
     $(this).text(event.data.a+event.data.b)
     return false//阻止事件冒泡,又或者:event.stopPropagetion()
     //又或者:event.parentDefault();
})
})

1.1.2事件方法24个快捷方式

方法说明
1.blur失去焦点
2.focus进入焦点
3.focusin指定元素的子元素进入焦点
4.focusout指定元素的子元素失去焦点
5.error出错时触发
6.click单击事件
7.dbclick双击事件
8.change发生变化时触发
9.keydown键盘按下时
10.keypress键盘持续敲击触发
11.keyup键盘抬起时触发
12.mouseenter指定的元素触发hover鼠标事件,且不会向父级冒泡
13.mouseover指定的元素触发hover鼠标事件,会向父级冒泡
14.mousedown鼠标按下时触发
15.mousemove鼠标久按时持续触发
16.mouseout离开指定的元素或者子元素时都会触发
17.mouseleave离开指定的元素时触发
18.mouseup鼠标抬起时触发
19.resize监听window以及元素的大小
20.scroll滚动页面时触发
21.select
22.submit提交表单数据,该api在高版本中已经移除
23.unload1.8版本及更高的版本已经移除该api,用户离开页面时触发;
24.load加载页面中的公共资源
1.1.3绑定一次性事件
one()是on()的一个特例,用于一致,但由他绑定的事件在执行一次ui响应之后就会失效

one(event,[data],function):

$(function(){
  $("ul>li").one("click",function(){
    alert($(this).text());
})
})
1.1.4 注销事件
交互型事件的生命周期往往与页面的生命周期相同的,但是很多交互事件只有在特定的时间或者条件下有效,超过了时效期,就应该把他注销掉,以节省空间,根据上面的事件绑定方式jquery提供了以下4种注销事件的方式:unbind(),die(),undelegate(),off()
  $('li').click(function(e){
            // console.log(e.clientX)
            console.log('点击');
        }).mouseenter(function(){
            console.log('mouseenter');
        }).mouseleave(function(){
            console.log('mouseleave');
        })
        //解除click的事件处理函数
       $('li').off('click')
1.1.5使用事件对象
当使用on(),bind(),delegate()等方法注册事件时,event对象实例将作为第一个参数传递给事件处理函数,这与DOM事件模型是完全相同的,但是jquery统一了IE事件模型和DOM事件模型中event对象属性和方法的用法,使其完全符合DOM标准事件模型的规范,jquery修正了web开发中可能遇到的浏览器兼容性问题,如下表所示
属性/方法说明
type获取事件的类型,如click、mouseover等。返回值为事件类型的名称,该名称与注册事件处理函数时使用的名称相同
target发生事件的节点。一般利用该属性来获取当前被激活事件的具体对象
relatedTarget引用与事件的目标节点相关的节点。对于mouseover事件来说,它是鼠标指针移到目标上时所离开的那个节点;对于mouseout 事件来说,它是离开 目标时鼠标指针将要进入的那个节点
altKey表示在声明鼠标事件时,是否按下了AlIt键。如果返回值为true,则表示按下
ctrlKey表示在声明鼠标事件时,是否按下了Ctrl键。如果返回值为true,则表示按下
shiftKey表示在声明鼠标事件时,是否按下了Shift 键。如果返回值为true,则表示按下
metaKey表示在声明鼠标事件时,是否按下了Meta键。如果返回值为true,则表示按下
which当在声明mousedown. mousup和click事件时,显示鼠标键的状态值,也就是说哪个鼠标键改变了状态。返回值为1,表示按下左键:返回值为2.表示按下中键:返回值为了, 表示按下右键
which当在声明kydwan和kypees事件时,显示触发事件的键盘键的数字编码
pageX对于鼠标事件来说,指定鼠标指针相对于页面原点的水平坐标
pageY对于鼠标事件来说,指定鼠标指针相对于页面原点的垂直坐标
screenX对于鼠标事件来说,指定鼠标指针相对于屏幕原点的水平坐标
screenY对于鼠标事件来说,指定鼠标指针相对于屏幕原点的垂直坐标
data存储事件处理函数第二个参数所传递的额外数据
preventDefault取消可能引起任何语义操作的事件,如元素特定事件类型的默认动作
stopPropagation防止事件沿着DOM树向上传播
1.1.6触发事件
事件都是在特定的条件下发生的,自然不同类型的事件触发时机是无法预测的,开发者无法知道用户何时单击按钮提交表单,或者何时输入文本,但是很多情况下,开发人员需要在脚本中控制事件触发的时机
jquery定义在脚本控制下自动触发事件处理函数的一系列方法,其中最常用的是trigger()方法。
trigger(type,[data])
$(function(){
   $("li").click(function(){
   alert($(this).text());
})
    $("li").mouseover(function(){
      $(this).trigger("click");
})
})
除此之外还提供了triggerHandler()对象对trigger()方法进行补充,该方法的行为表现与trigger()方法类似,用法也相同
triggerHandle()方法不会触动浏览器默认事件
triggerHandle()方法只触发jquery对象集合中第一个元素的事件处理函数
triggerHandle()方法返回的是事件处理函数的返回值,而不是jquery对象,如果最开始的jquery对象集合为空,则这个方法返回undefined
1.2.1切换事件
jquery定义了两个事件切换的合成方法:hover()和toggle().事件切换在web开发中经常会用到,如样式交换,行为交换等,另外还提供了一个toggleClass()方法,它能够显示或隐藏指定的class样式,实现样式切换等效果.
taggle([speed],[easing],[fn])
speed:为显示或隐藏的时间,默认为0毫秒,可选值有"slow","normal","fast"
easing:可选参数,用来指定切换的效果,默认是"swing",可用参数"linear".
fn:可选参数,定义在动画完成时执行的函数,每个元素执行一次
$(function(){
   $("button").click(function(){
      $("ul#list").toggle("slow");
      //也可以传递boolean值,  $("ul#list").toggle(false);
})
})
1.2.2使用悬停事件
hover()方法可以模仿悬停事件,该方法传递两个参数:指定触发事件的元素,第二个为函数
$(function(){
     $("input").hover(function(){
         alert("该鼠标停留")
   })   
 })
1.2.3事件命名空间
事件命名空间,以方便事件管理
$(function(){
   $("li").on("click.a",function(){
       $("body").append("<p>click</p>");
})
 $("li").on("mouseover.a",function(){
       $("body").append("<p>mouseover</p>");
 })
 $("li").off(".a");      
})
1.2.3绑定多个事件
$(function(){
   $("div").on("mouseover mouserout",function(event){
     $("body").append(event.type+"<br/>");
})
})
1.2.5自定义事件
jquery支持制定义事件,所有自定义事件都通过trigger()方法触发
$(function(){
  $("input").bind("delay",function(event){
   setTimeout(function(){
    alert(event.type);
},1000)
})
   $("input").click(function(){
   $("input").trigger("delay");
})
})
1.2.6页面初始化
jquery定义了ready()封装javascript原生的window.onload方法,ready()方法表示当DOM载入就绪,可以查询和被操纵时,能够自动执行的函数,他是jquery事件模型中最重要的一个函数,极大地提高了web应用程序的响应速度
$(function(){
   $("div").eq(0).ready(function(){
      alert(1)
})
  $("div").eq(1).ready(function(){
      alert(2)
})
  $("div").eq(2).ready(function(){
      alert(2)
})
})
//ready方法一般按照如下方式调用
$(document).ready(function(){
 //页面初始化之后执行的函数
})
jquery(function($){
  //页面初始化后执行的函数体代码
})
$(function(){
   //页面初始化后执行的函数体代码
})
//同时也可以取一个别名
$(function(me){
   me("div").text("jquery函数别名")
})
1.2.7 使用ready()事件
jQuery的ready事件与JavaScript的load事件具有相同的功能,但是它们在触发时机方面还存在如下细微区别。
(1) JavaScip的load事件是在文档内容完全加载完毕后才被触发的。这个文档内容包括页面中所有节点以及节点关联的文件。这时JavaSeript 才可以访问网页中任何元素内容。这种情况对于编写功能性的代码非常有利,因为无需考虑加载的次序。
(2) jQuery的ready事件在DOM完全就绪时就可以被触发,此时文档中所有元素都是可以访问的,但是与文档关联的文件可能还没有下载完毕。通俗地说,就是浏览器下载并完成解析HTML的DOM树结构,代码就可以运行。
如,对于一个大型图库网站来说,为页面中所有显示的图像绑定一个初始化设置的脚本。 如果使用JavaSript原生的load事件来设计,那么用户在使用这个页面之前,必须等待页面中所有图像下载完毕才能够实现。而在load事件等待图像加载过程中,如果行为还未添加到那些已经加载的图像上,则此时用户操作它们,可能会导致很多意想不到的尴尬。而使用jQuery的ready事件,则在DOM树结构解析之后,就立即触发页面初始化事件,从而避免使用load事件所带来的尴尬。
但是,由于jQuery的ready事件过早地触发,虽然DOM树结构已经解析完毕,但是很多元素的属性未必生效。例如,很多图像还没有加载完毕,导致这些图像的属性无效,如图像的高度和宽度。要解决这问题,可以使用jQuery的load事件进行触发,该事件等效于JavaScript 的load事件。
不仅如此,javascript的load事件存在一个很严密的缺陷,就是它不能被多次调用,但被多次调用时,后者覆盖前者.根据这个问题,我们用原生封装一下addLoadEvent();
/*
当多个js脚本出现同样的load方法时,相同的脚本会被覆盖,
因此自己封装一个addLoadEvent来解决此问题
工作原理如下
  1 先把现有的window.onload事件处理函数的值存入处理函数的变量中(oldonLoad)
  2 如果在这个处理函数上还没有绑定任何函数,则为其添加新的函数
  3 如果在这个处理函数上已经绑定了一个函数,就把函数追回到现有函数的尾部

*/
//    window.onload=()=>{ 
//        functionA();
//        functionB();
//      }

//      functionA=()=>{
//          alert("第一次调用")
//      }
//      functionB=()=>{
//          alert("第二次")
//      }

//    addloadEvent=func=>{  
//         //把window.onload事件处理函数的值存入变量oldonLoad
//         let oldOnLoad = window.onload;   
//         /*
//         如果window.onload事件没有绑定任何事件处理函数,则为其添加新的事件处理函数
//         */
//         if (typeof window.onload != "function"){
//             window.onload = func;
//         }else{
//             //先执行原来已绑定的事件处理函数,然后调用新添加的事件处理函数
//         window.onload=()=>{
//             oldOnLoad?oldOnLoad():func();
//         }
//         }
//    }

//    addloadEvent(functionA)
//    addloadEvent(functionB)
2.使用ajax
ajax的核心是javascript对象XMLHttpRequest,该对象在IE5中首次引入,它能够帮助用户使用javascript向服务器提出请求并处理响应,在不阻塞网页交互响应,考虑到浏览器的兼容性,jquery封装了ajax应用,避免编写大量兼容性代码
2.1 jquery ajax基础
jquery封装了ajax交互过程,用户仅需调用jquery方法,就可以轻松实现客户端与服务器端异步通信,从而帮助开发人员从繁琐的底层技术中解脱出来,专业于业务层开发
jax是Asynchronous JavaScript and XML首字母缩写,表示异步JavaScript和XML,它并不是指一种单一的技术, 而是有机地利用了一系列Web 技术所形成的结合体, 它的出现揭开了无刷新更新页面的新时代,并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。
Ajax主要用到下面几种技术实现异步通信:
日基于标准的XHTML结构和CSS样式。
通过DOM (Document Object Model) 实现动态显示和交互。
通过XML和XSLT进行数据交换和处理。
用XMLHttpRequest插件进行异步通信。
使用JavaScript实施逻辑控制,以便整合以上所有的技术。
Ajax给Web开发提供了方便,并带来很多益处,简单概括如下。
(1)获得了主流浏览器的主持。
这使得异步通信技术获得快速发展,并能够普及到Web应用的每个角落。由于浏览器都内置了Ajax组件,这样用户就不用担心所开发的Web应用是否被支持,只要浏览器允许执行JavaScript程序即可。
(2)提升了用户体验。
Ajax的提出就是为了解决传统通信给用户访问带来的不便,优秀的用户体验正是Ajax获得广大开发者和用户认可的根本原因。浏览者不用刷新页面就可以快速更新页面显示信息,这在传统Web开发中是很难实现。正是因为异步通信技术的普及,才诞生了众多Web 2.0类型的网络应用。
(3)提高了web应用的性能
于传统的页面刷新请求不同,ajax实现局部数据请求和更新功能,使得客户端于服务器交互数据量大大降低,节省了大量带宽,同时请求响应速度也变得更加迅速
2.2使用get请求
jquery定义了get()方法,专门负责通过远程HTTP get请求方式载入信息,该方法具有一个简单的get请求功能,以取复杂的$AJAX()方法
get()包含4个参数,其中第一个参数为必须设置项,后面3个为可选参数
第一个参数表示要请求页面 url
第二个参数表示一个对象结构的名/值队列表
第三个参数表示异步交互成功返回个的回调函数,回调函数的参数值为服务器端响应的信息
第四个参数表示服务器端响应信息返回的内容格式,如:XML,HTML,SCRIPT,JSON和text或者_default
//jQuery.get(url,[data],[callback],[type])
$(function(){
  $("input").click(function(){
   $.get("text1.asp",{
     name:"css8",
     pass:123456,
     age:1
},function(data){
   alert(data)
})
})
})
2.2.2使用post请求
post请求方式及参数于上面雷同,代码如上所示,但应该注意的是get()只能用来获取数据,而post()可以用来传递数据;
2.2.3 使用ajax请求
ajax()方法是jquery实现ajax的底层方法,也就是说他是get(),post()等方法的基础,使用该方法可以完成通过HTTP请求加载远程数据,由于ajax()方法的参数较为复杂,在没有特殊请求时,使用高级方法(如get(),post()等)即可.
ajax()方法以及参数列表如下
参数数据类型说明
asyncBoolean设置是否异步请求。默认为tue即所有请求均为异步请求。如果需要发送同步请求,设置为fale即可。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行
beforeSendFunction发送请求前可修改XML HtpRequet对象的函数,如添加自定义HTTP头。XMLHtpRequest对象是唯一的参数。该函数如果返回false,可以取消本次Ajax请求
cacheBoolean设置缓存。默认值为true,当dataType为script时,默认为false.设置为false将不会从浏览器缓存中加载请求信息
completeFunction请求完成后回调函数(请求成功或失败时均调用) 。该函数包含两个参数: XMLHttpRequest对象和一个描述成功请求类型的字符串
contentTypeString发送信息至服务器时内容编码类型。默认为application/x-www-form-urlencoded
dataObject, String发送到服务器的数据。将自动转换为请求字符串格式,必须为key/value 格式。GET请求中将附加在 URL后。查看processData 选项说明以禁止此自动转换。如果为数组,jQuery将自动为不同值对应同一个名称。如{foo:[“bar1”, “bar2”]}转换为’&foo=bar1&foo-=bar2’
dataFilterFunction预期服务器返回的数据类型。如果不指定,jQuery 自动根据HTTP包含的MIME信息返回responseXML或responseText, 并作为回调函数参数传递,可用值:xml;返回XML文档,可用jQuery处理,html:返回纯文本HTML信息,包含的script标签会在插入dom时执行,script:返回纯文本JavaSerpt 代码。不会自动缓存结果。除非设置了Cache参数.注意:在远程请求时(不在同一个域下), 所有POST请求都将转为GET请求(因为将使用DOM的script标签来加载),json:返回JSON数据,jsonp: JSONP 格式。使用JSONP形式调用函数时,如:myurl?callback=?", jQuery 将自动替换为正确的函数名,以执行回调函数,text:返回纯文本字符串
errorFunction请求失败时调用的函数。该函数包含3个参数: XMLHttpRequest 对象、错误信息(可选),捕获的错误对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是timeout、error、notmodified 和parsererror
globalBoolean是否触发全局Ajax事件,默认值为true。设置为false将不会触发全局Ajax事件,如ajaxStart或ajaxStop可用于控制不同的Ajax事件
ifModifiedBoolean仅在服务器数据改变时获取新数据,默认值为false. 使用HTTP 包含的Last-Modifed 头信息进行判断
jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代callback=?"这种GET或POST请求中URL参数里的callbak部分,如{jsonp:’ onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器
passwordString用于响应HTTP访问认证请求的密码
processDataBoolean发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型applocation/x-ww.form-urlencoded,默认值为true,如果要发送DOM数信息或其他不希望转换的信息,请设置为false
scriptCharsetstring只有当请求时dataType为jsonp或script,并且type是get才会用于强制修改charset,通常在本地和远程的内容编码不同时使用
successfunction请求成功后回调函数,函数的参数由服务器返回,并根据datatype参数进行处理后的数据,描述状态的字符串
timeoutnumber设置请求超时时间(毫秒),此设置将覆盖全局设置
typestring设置请求的方式,如post或get,默认get,其他HTTXP请求方法,如put或delete也可以使用,但仅部分浏览器支持
urlstring用于响应HTTP访问认证请求的用户名
usernamestring用于响应HTTP访问认证请求的用户名
xhrfunction需要返回一个XMLHttpResquest对象,默认在IE下是ActiveObject,而其他情况下是XMLHttpResquest,用于重写或者提供一个增强的XMLHttpResquest对象
2.2.4跟踪状态
jquery在XMLHttpResquery对象定的readyState属性基础上,对异步交互服务器响应状态进行了封装,提供了6个响应事件,以便于进一步细化对整个请求响应过程的追踪
事件说明
ajaxStartajax请求开始进行响应
ajaxSendajax发送请求时开始响应
ajaxCompleteajax请求完成时进行响应
ajaxSuccessajax请求成功时进行响应
ajaxStopajax请求结束时响应
ajaxErrorajax请求错误时响应
$(function(){
   $.ajax({
      type:"post"
      url:"test.txt"
      data:"name=css8"
})
//响应顺序如下
$("div").ajaxStart(function(){
    alert("ajax请求开始")
})
$("div").ajaxSend(function(){
    alert("ajax发送请求")
})
$("div").ajaxSuccess(function(){
    alert("ajax请求成功")
})
$("div").ajaxComplete(function(){
    alert("ajax完成请求")
})
$("div").ajaxStop(function(){
    alert("ajax请求结束")
})
$("div").ajaxError(function(){
    alert("ajax报错")
})
})
2.2.5载入文件
遵循ajax异步交互的设计原则,jquery定义了可以加载网页文档的方法load(),该方法与getScript()方法的功能相似,都是加载外部文件,但是他们的用法完全不同,load()方法能够把加载的网页文件附加到指定的网页标签中
使用ajax方法可以替代load方法,因为load()方法是以ajax()方法作为底层实现的
$(function(){
   $("input").click(function(){
         $("div").load("text.html");
})
})
<---------------------------------------->
$(function(){
   $("input").click(function(){
   var str = ($.ajax({
    url:"table.html"
    async:false;
})).reponseText;//获取XMLHttpResquest对象中包含的服务器响应信息
$("div").html(str);
})
})
2.2.6设置ajax选项
对于频繁与服务器进行交互的页面来说,每-次交互都要设置很多选项,这种操作是很繁琐的,也容易出错。为此,jQuery 定义了ajaxSetup0方法,该方法可以预设异步交互中通用选项,从而减轻频繁设置选项的繁琐。
ajaxSetup()方法的参数仅包含一个 参数选项的列表对象,这与ajax0方法的参 数选项设置是相同的。在该方法中设置的选项,可以实现全局共享,从而在具体交互中只需要设置个性化参数即可。
$(function() {
$.ajaxSetup({   //预设公共选项
url: "test.asp", //请求的URL
global: false,   //禁止触发全局Ajax事件
type:"POST",      //请求方式
dataType:"text",  //响应数据的类型
success :function (data) { //响应成功之后的回调函数
alert (data) ;
});

$("input") .eq(0) .click (function() { / /为按钮1绑定异步请求$.ajax ({
data : "name=zhu"
/ /发送请求的信息
};
};
$("input") .eq(1) .click (function() { //为按钮2绑定异步请求$.ajax({
data : "name=wang"
/ /发送请求的信息
}) ;
}) ;
$("input") .eq(2) .click(function(){ // 为按钮3绑定异步请求$.ajax( {
data : "name=zhang"
//发送请求的信息
}) ;
}) ;
})
2.2.7序列话字符串
在Aja异步通信过程中,客户端所发送的请求字符串格式必须是由“&”字符连接的多个名/值对,列如, user-zhu&sex-man&grade=2。 而当使用表单发送请求时, 发送请求的信息并非按此格式进行传递。用户需要手工编写发送信息的字符串格式,为了减轻开发人员不必要的劳动量,特意定义了serialize(方法,该方法能够帮助用户按名/值对的字符串格式快速整理,并返回合法的请求字符串。
//在发送请求之前,调用serialize()方法,就可以轻松完成解决合法格式的请求字符串的设计了
$(function(){
  $("p").html($("form").serialize());
  return false;
})
//除此之外jquery还定义了serializeArray()方法,该方法能够返回指定表单域值的json结构对象
该方法无法在form表单上直接调用
$(function(){
  $("#submit").click(function(){
    var arrar = $("input, select,:redio").serialzeArray();
})
})

再最后,献上原生es6封装的ajax

let ajax=json=>{
   const xhr = new XMLHttpRequest();
   const {mathod,url,success,error} = json;
   let data = json.data||{};
  

 //封装fn函数
   function fn(obj){
       let arr=[];
       for(let key in obj){
           arr.push(key+"="+obj[key])
       }
        return arr.join("&");
   }

   //区分"get"以及'post'
   switch(mathod){
       case'get':
       xhr.open(mathod,url+"?"+fn(data),true);
       xhr.send(null)
       break;
       case"post":
       xhr.open(mathod,url,true)
       xhr.send(fn(data))
       xhr.setReadyHeader("content-type","application/x-www-unlencoded");
       break;
   }
    //封装状态码
   xhr.onreadystatechange=()=>{
         if(xhr.readyState===4){
             if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                 success(JSON.parse(xhr.responseText))
             }else{
                 error(status)
             }
         }
   }
}
ajax({
    mathod:"get",
    url:"https://jsonplaceholder.typicode.com/posts",
    // data:{
    //     usedname:"zhoulan",
    //     age:"28",
    // }
    success:res=>{
        console.log(res)
    },
    error:status=>{
        console.log(xhr.status)
    }
});
今天的快乐已经结束,下一章设计动画跟使用辅助工具,我们下章见,2020-5-13;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hasownproprety

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值