jquery进阶实践之利用最优雅的方式怎样写ajax请求-亚博电竞手机版

这篇文章将为大家详细讲解有关jquery进阶实践之利用最优雅的方式怎样写ajax请求，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

首先需要一个配置文件

varapi={ basepath:'http://192.168.200.226:58080', pathlist:[ { name:'agentheartbeat', path:'/api/csta/agent/heartbeat/{{agentid}}', method:'post' }, { name:'setagentstate', path:'/api/csta/agent/state', method:'post' }, { name:'getagents', path:'/user/agent/{{query}}', method:'get' } ] }

然后需要一个方法，把配置文件生成接口

functionwellapi(config){ varheaders={}; varapi=function(){}; api.pt=api.prototype; varutil={ ajax:function(url,method,payload){ return$.ajax({ url:url, type:method||"get", data:json.stringify(payload), headers:headers, datatype:"json", contenttype:'application/json;charset=utf-8' }); }, /** *[render模板渲染] *主要用于将/users/{{userid}}和{userid:'89898'}转换成/users/89898，和mastache语法差不多， *当然我们没必要为了这么小的一个功能来引入一个模板库 *query字符串可以当做一个参数传递进来 *例如：/users/{{query}}和{query:'?name=jisika&sex=1'} *@authorwdd *@datetime2017-03-13t19:42:58 0800 *@param{[type]}tpl[description] *@param{[type]}data[description] *@return{[type]}[description] */ render:function(tpl,data){ varre=/{{([^}] )?}}/; varmatch='';  while(match=re.exec(tpl)){ tpl=tpl.replace(match[0],data[match[1]]); } returntpl; } }; /** *[setheader暴露设置头部信息的方法] *有些方法需要特定的头部信息，例如登录之后才能获取sesssionid,然后访问所有的接口时，必须携带sessionid *才可以访问 *@authorwdd *@datetime2017-03-13t10:34:03 0800 *@param{[type]}headers[description] */ api.pt.setheader=function(headers){ headers=headers; }; /** *[fire发送ajax请求，this会绑定到每个接口上] *@authorwdd *@datetime2017-03-13t19:42:13 0800 *@param{[type]}pathparm[description] *@param{[type]}payload[description] *@return{[type]}[description] */ functionfire(pathparm,payload){ varurl=util.render(this.path,pathparm); returnutil.ajax(url,this.method,payload); } /** *[for遍历所有接口] *@authorwdd *@datetime2017-03-13t19:49:33 0800 *@param{[type]}vari[description] *@return{[type]}[description] */ for(vari=0;i
试用一下
           varsaas=wellapi(api); saas.agentheartbeat.fire({agentid:'5001@1011.cc'}) .done(function(res){ console.log('心跳成功'); }) .fail(function(res){ console.log('心跳失败'); });   
优点与扩展
[优点]：类似与promise的回调方式
[优点]：增加一个接口只是需要增加一个配置文件，很方便
[扩展]：当前的ajax 的contenttype我只写了json，有兴趣可以扩展其他的数据类型
[缺点]：没有对函数参数进行校验
关于“jquery进阶实践之利用最优雅的方式怎样写ajax请求”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
        
                
展开全文