封装json ajax函数
2016-02-28 11:40
453 查看
前几天做项目多次用到了Ajax,有的时候一个js函数中要调用几次,每次都去写一大段麻烦的很,我就想为什么不去把Ajax调用的过程封装一下,把参数和链接传进去,然后把返回值传给调用函数来处理呢。想到我就去做了,写了这个个函数:
可是我每次运行的时候都提示If(html.result == “success”)有错误,html为空,我单步跟踪了一下,jsonAjax方法也执行了。我就很郁闷,就请同事测试了一下。发现他那边一会行一会不行。
感觉单步跟踪不能真实的测试出到底发生了什么,然后我就用alert测试了一下。
再次运行先是alert了一个”undefined”,接着又alert了一个object
仔细想了一下ajax调用应该是浏览器又开的一个线程,所以在获得html的时候一会可以拿到,一会拿不到。
然后就把函数重新设计了一下:
顺利执行成功。
虽然在封装ajax方法过程中遇见了些许困难,浪费了一些时间,但是还是挺值的。明白了两点:
第一, js是支持多线程的。
第二, ajax是多线程实现的,不能等待它的返回值(让主线程sleep也不太好),因为它不一定什么时候执行。
/** * ajax提交 * @param url * @param param * @param callback回调函数 * @return */ function jsonAjax(url, param) { alert(url); $.ajax({ type:"POST", url:url, data:param, dataType:"json", success:function(html){ return html; }, error:function(){ return {result:”error”}; } }); } 测试:var html = jsonAjax(url, param); If(html.result == “success”)…
可是我每次运行的时候都提示If(html.result == “success”)有错误,html为空,我单步跟踪了一下,jsonAjax方法也执行了。我就很郁闷,就请同事测试了一下。发现他那边一会行一会不行。
感觉单步跟踪不能真实的测试出到底发生了什么,然后我就用alert测试了一下。
/** * ajax提交 * @param url * @param param * @param callback回调函数 * @return */ function jsonAjax(url, param) { alert(url); $.ajax({ type:"POST", url:url, data:param, dataType:"json", success:function(html){ alert(html); return html; }, error:function(){ return {result:”error”}; } }); } 测试:var html = jsonAjax(url, param); Alert(html); If(html.result == “success”)
再次运行先是alert了一个”undefined”,接着又alert了一个object
仔细想了一下ajax调用应该是浏览器又开的一个线程,所以在获得html的时候一会可以拿到,一会拿不到。
然后就把函数重新设计了一下:
/** * ajax提交 * @param url * @param param * @param callback回调函数 * @return */ function jsonAjax(url, param, callback) { alert(url); $.ajax({ type:"POST", url:url, data:param, dataType:"json", success:callback, error:function(){ jQuery.fn.mBox( { message :'恢复失败' }); } }); }
顺利执行成功。
虽然在封装ajax方法过程中遇见了些许困难,浪费了一些时间,但是还是挺值的。明白了两点:
第一, js是支持多线程的。
第二, ajax是多线程实现的,不能等待它的返回值(让主线程sleep也不太好),因为它不一定什么时候执行。
相关文章推荐
- 妙用javascript:void(0)
- js实现<a>超链接的跳转验证
- 《JavaScript语言精粹》知识点总结(二)
- window 窗口对象 - Javascript语言描述
- HTML、CSS、JavaScript学习总结
- bzoj 1013: [JSOI2008]球形空间产生器sphere
- javascript:void(0)
- js中一些小知识点总结--持续更新
- JS0热身运动
- Native与H5+JS 解决方案
- javascript--解除事件绑定
- javascript--事件绑定&模型
- javascript--继承&多态
- 安全检测JavaScript基本数据类型和内置对象
- 网页信息抓取进阶 支持Js生成数据 Jsoup的不足之处
- JS操作浏览器剪切板内容
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
- postal.js使用
- js正则表达式
- bzoj 1012: [JSOI2008]最大数maxnumber