【jquery】适用Deferred实现jquery将请求封装成函数

来源:互联网 发布:淘宝网豆豆鞋 编辑:程序博客网 时间:2024/05/16 14:04

有时候需要将jquery的请求api数据的代码封装成函数,供其他页面调用,此时有两种方法,一种是适用ajax发起同步请求,但是ajax的同步请求会阻塞主线程UI的刷新。在jquery 1.5.0之后引入了Deferred,关于Deferred的相关学习和说明可以参考如下一些优秀的界面:

http://blog.csdn.net/ljj_9/article/details/52797299

本文介绍一个简单的使用demo,该demo封装了三个使用jquery发起的get请求方法,每个方法接受一个传入的参数。代码如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5的标题</title><script src="/js/jquery-1.12.2.min.js"></script><script>function getLocation(imei) {   var defer = $.Deferred();    $.get("/devices/"+imei+"/location",function(data,status){   defer.resolve(data);    });return defer.promise();}function getMileage(imei) {   var defer = $.Deferred();    $.get("/devices/"+imei+"/mileage",function(data,status){   defer.resolve(data);    });return defer.promise();}function getFences(imei) {   var defer = $.Deferred();    $.get("/devices/"+imei+"/fences",function(data,status){   defer.resolve(data);    });return defer.promise();}$(document).ready(function(){  $("button").click(function() {      //get location.  $.when(getLocation("869449021424717")).done(function(data) {  alert("get location code="+data.code);  });  //get milegae.  $.when(getMileage("869449021424717")).done(function(data) {  alert("get mileage code="+data.code);  });      //get fences.  $.when(getFences("869449021424717")).done(function(data) {  alert("get fences code="+data.code);  });    });});</script></head><body><button>点击发送请求</button></body></html>