您的位置:时时app平台注册网站 > web前端 > ng-events类似ionic中Events的angular全局事件【彩世界

ng-events类似ionic中Events的angular全局事件【彩世界

2019-10-18 23:57

注册事件

  • 你可以使用 ngEevents.on 注册一个全局事件:
ngEvents.on('eventName', function (item) {
    console.log(item.name   ' was selected!');
});

第一个参数是事件的唯一名称。 第二个参数是在触发指定事件时调用的回调函数。

  • 您可以使用 ngEvents.off 方法取消注册的事件。

serializeArray()方法

serialize()方法类似,但是serializeArray()方法不是返回字符串,而是将DOM元素序列化后,返回json格式的数据。

html代码

    <input type="checkbox" name="user" value="1" checked>
    <input type="checkbox" name="user" value="2" checked>
    <input type="checkbox" name="user" value="3">
    <input type="checkbox" name="user" value="4">

js代码

    var fields = $(":checkbox").serializeArray();
    console.log(fields);   // 打印一个数组[ {name:'user',value:'1'} , {name:'user',value:'2'} ]

2 筛选载入的HTML文档

介绍

ng-events 在 Angular 2 以上的版本中使用,类似于 ionic 中的 Events。可以使用 ng-events 注册一个全局事件,然后在需要的时候触发这个事件。

GitHub地址

$.get()和$.post()方法

使用get的方式进行异步请求,格式为:$.get( url , [data] , [callback] , [type] )

url:请求的文件地址。

data:可选参数,发送至服务器的数据,会附加到url地址中。

callback:可选参数,载入成功时回调函数,只有当Response返回的状态是success才能调用。

type:可选参数,服务器返回的格式,包括 xml、html、script、json、text、_default。

 

触发事件

使用 ngEvents.trigger 触发一个全局事件:

ngEvents.trigger('eventName', {
    id: 42,
    name: 'Pencil'
});

第一个参数是事件的唯一名称. 第二个是(可选)事件参数。
你可以添加任意数量的参数并在回调方法中获取它们。

回调函数

load()的回调有三个参数,分别是:

responseText:请求返回的内容。

textStatus:请求状态:success、error、notmodified、timeout 四种。

XMLHttpRequest: XMLHttpRequest对象。

  ajaxError(callback)

快速开始

npm install ng-events --save

在 Angular 6 以上的版本中使用,修改 angular.json 文件, 在Angular 6以下版本中使用,修改.angular-cli.json文件

 "scripts": [
              "node_modules/ng-events/dist/ng-events.js"
              // ...
            ]

当然也可以直接在index.html中引入,不过并不推荐这么做。

title: 《锋利的jQuery》七、jQuery和Ajax的应用
date: 2017-07-23 22:48:00
tags: 锋利的jQuery

 

load()方法

load()方法能载入远程html页面到dom中。

格式为:load( url , [data] , [callback] )

url:请求html页面的地址。

data: 可选参数,发送至服务器的数据。

callback:可选参数,请求完成后的回调,不论请求成功或者失败。

  用来对一个数组或者对象按照key/value进行序列化


9 ajax全局事件

序列化元素

  ajaxComplete(callback)

serialize()方法

在提交表单的时候,需要给服务器传表单中的数据,如果表单的内容比较多,一个个获取比较麻烦,jQuery提供了一个简化的方法serialize(),它能够将dom元素的内容序列化为字符串,用于ajax请求。例如表单的id为form,那么可以将ajax的data属性直接写为$('#form').serialize()

 


 

$.getScript()和$.getJson()方法

$.getScript()用于加载一个新的js文件,和写一个<script>标签的效果是一样的,但因为在页面初次加载时就取得所有js文件是没有必要的,所以就需要这个方法。

$.getScript()的第一个参数是js文件的地址,第二个参数是回调函数,回调只会在js文件成功加载后才会运行。

$.getJson()用于获取json文件,使用方法和$.getScript()相同。只是在回调函数中可用一个参数来获取json的内容。

  $().each(callback)方法以匹配的元素为对象,每次执行传递的函数时,改变函数中的this对象指向一个不同的DOM元素。

筛选载入html文档

上面是将test.html的所有内容都加载进来,如果只需要加载一部分那么只需要改变url参数即可,格式为:url selector

只将test.html页面中类名为.para的元素加载进来。

$('#resText').load('text.html .para')

$("#resText").load("test.php",function(){})

回调函数

回调函数只有当数据成功返回(success)才能被调用,这点和load()方法不同,回调函数有两个参数,分别是datatextStatus

data是成功后返回的数据,textStatus是请求状态。

 

在jQuery中对Ajax进行了封装,在jQuery中$.ajax()属于最底层方法,第二层是$.post()load()$.get()方法,第三层是$.getScript()$.getJson()方法。通常第二层的方法使用频率最高。

  全局事件方法

$.ajax()方法

$.ajax()是jQuery最底层的ajax实现,上面的所有方法都可以用这个方法代替。

$.ajax()的参数是一个对象,对象中的每个参数都是可选的,具体的参数如下:

参数名称 类型 说明
url string 默认是当前页面,发送请求的地址
type string 请求方式,默认为get方式
timeout number 设置请求超时的时间,单位是毫秒
data object或string 发送到服务器的数据
dataType string 预期服务器返回的数据类型,如果不指定,jQuery将自动根绝http的MIME信息返回responseXML或responseText,可选择的格式有:xml(xml文档)、html(纯html文本,包含的script标签会在插入dom时执行)、script(返回纯文本js代码,不会自动缓存结果,如果是跨域请求,则post方式都会转为get方式)、json(返回json数据)、jsonp(跨域获取数据,使用jsonp形式调用函数时,url地址的最后一个参数名是callback,值是?,这个?将由jQuery替换为正确的函数名,用以执行回调函数)、text(纯文本)
beforeSend function 发送请求前可以更改XMLHttpRequest对象的函数,例如添加自定义http头,在beforeSend中返回false可以取消本次ajax的请求,改函数的唯一参数就是XMLHttpRequest对象,this是本次ajax请求时传递的options参数
complete function 请求完成后调用的回调函数,失败和成功都会调用,第一个参数是XMLHttpRequest对象,第二个参数是描述成功请求类型的字符串,this是本次ajax请求时传递的options参数
success function 请求成功后的回调函数,第一个参数是返回的数据,第二个参数是描述状态的字符串,this是本次ajax请求时传递的options参数
error function 请求失败时调用的函数,第一个参数是XMLHttpRequest对象,第二个参数是错误信息,第三个参数是捕获的错误对象,this是本次ajax请求时传递的options参数
global boolean 默认为true,表示是否触发全局ajax事件,设置为false将不会触发。

需要注意的是,如果将传递给服务器的数据使用字符串拼接的方式拼接到url上,必须使用encodeURIComponent()方法转码,如果是写到data属性则不需要。

 

载入html文档

假设有一个test.html的页面,那么只需要这样写就能引入这个test到当前页面。

当前页面的html部分

<div id=""resText></div>

当前页面发送请求

$('#resText').load('text.html');

无参数传递,使用GET方式

$.param()方法

这是serialize()方法的核心,用以将一个数组或对象按照key/value进行序列化。比如将一个普通对象序列化

var obj = { a:1,b:2,c:3 };
var k = $.param(obj);
console.log(k);      // 输出a=1&b=2&c=3    

load方法主要获取web服务器上静态数据

Ajax全局事件

通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。

例如当请求开始时,会触发ajaxStart()方法的回调函数,当请求结束时,会触发ajaxStop()方法的回调函数。这些都是全局方法,因此无论创建它们于代码何处,只要有Ajax请求发生时,就会触发它们。

html代码

<div id="loading">加载中...</div>

js代码

$('#loading').ajaxStart(function(){
    $(this).show();
})

$('#loading').ajaxStop(function(){
    $(this).hide();
})

还有另外几个方法:

方法名称 说明
ajaxComplete(callback) Ajax请求完成时执行的函数
ajaxError(cakkback) Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行的函数

如果不想让Ajax触发这些全局方法,可以将global设置为false,在jQuery1.5版本之后可以设置:

$.ajaxPrefilter(function(options){
    options.global = true;
})

  $("#form").serialize()方法

  $.each(object[,callback])

  type 服务器返回的内容的格式,包括xml ,html ,script ,json ,text ,_default

 

  在项目中如果要传递一些参数给服务器,可以使用$.get(),$.post()和 $.ajax方法

7$.ajax()

  var name=data.userName

8 序列化元素

 

  XML文档

  HTML片段

  $().each() 和$.each()方法

  ajaxSuccess(callback)

  2 回调函数function(data,testStatus){}

  可以为元素注册ajax全局事件,当页面触发ajax时触发,如果再调用ajax方法时不触发全局事件,则在$.ajax()中设置global:false

1 load方法载入HTML文档

  在事件函数中加载js和json文件

  

$("#resText").load("test.html .para")

View Code

load(url [,data] [,callback])
$(function(){
  $("#send").click(function(){
  $("#resText").load("test.html")
  })
})

  可以对该表单下的数据进行序列化。

6数据格式

 

  data是作为一个对象参数传入回调函数,可以直接使用

  load()方法带有参数传递时,同样会使用post方式发送请求。因此也可以使用load()方法完成同样的功能。

  可以使用强大的DOM处理能力,对XML进行处理

 

载入页面class为“para”的内容

彩世界网址 1彩世界网址 2

3 传递方式

 

4 回调参数

function(responseText,textStatus,XMLHttpRequest){
    responseText 请求返回内容
    textStatus 请求返回状态 :success,error ,notmodified , timeout
    XMLHttpRequest 对象
  }

  该方法为jquery最底层的实现,可以替代前面所有的方法;

  1 $.get(url [,data] [,callback] [,type])

有参数传递,使用POST方式

  load()方法回调函数,该函数有三个参数,

  此方法可以用于遍历任何对象。

 

jquery 中的ajax

  $.each([0,1,2]function(){})

  JSON文件

 

 

 

 

  $.param(obj)

 

  $("#id").ajaxStart(function(){}).ajaxStop(function(){});

  在回调函数中指明文件类型为json后

5$.get()方法和$.post()方法

  object可以为对象和数组,

  ajaxSend(callback)

  不需要处理,可直接插入页面中

$.post()

 

 

$("#resText").load("test.php" , {name:"rain",age:"22"},function(){})

  因为jquery对js的封装,只需要改变jquery函数为$.post()就可以实行GET和POST的切换

 

$.getScript() 和 $.getJson()

 

本文由时时app平台注册网站发布于web前端,转载请注明出处:ng-events类似ionic中Events的angular全局事件【彩世界

关键词: