WEB开发网
开发学院网页设计JavaScript web前台技术学习总结(2)-用jQuery自定义的请求JSO... 阅读

web前台技术学习总结(2)-用jQuery自定义的请求JSON方法

 2009-09-14 00:00:00 来源:WEB开发网   
核心提示:jQuery库中的ajax工具很优秀,也很实用,除了方便的预设方法,还可以通过自定义来满足自己的要求.比如,自带$.getJSON方法能够很简洁快速的进行ajax的JSON请求:$.getJSON("/getjsonresponse",{param1:value1},function(data){/

jQuery库中的ajax工具很优秀,也很实用,除了方便的预设方法,还可以通过自定义来满足自己的要求.

比如,自带$.getJSON方法能够很简洁快速的进行ajax的JSON请求:

$.getJSON("/getjsonresponse",{param1:value1},function(data){
  //请求成功时的操作
});

但是,如果想要定义请求错误时的操作,或者修改其他ajax请求的参数,这个工具就不适用了.因此,根据需要,可以用$.ajax方法(这个方法是 jquery最基础的ajax请求工具,其他预设工具都是从此"继承"来的)来定义一个$.reqJSON方法.其主要思想是:把最需要自定义的参数直接放在函数的参数(arguments)里,其他参数可以通过最后一个参数params来覆盖.

jQuery.reqJSON = function(url, data, success, error, params) {
  var CallParams = {};
  CallParams.type = "POST";
  CallParams.url = rnd ? url + '?r=' + new Date() * 1 : url;
  CallParams.processData = true;
  CallParams.data = data;
  CallParams.dataType = "json";
  CallParams.success = success;
  CallParams.error = error || xm_ajax_error;
  if (params) {
    $.extend(CallParams, params);
  }
  $.ajax(CallParams);
}

相关参数的说明

url - string,请求地址;

data - object,string,待传给后台的参数

success - function,请求成功时的回调函数

error - function,请求失败时的回调函数

params - object,用于扩展或覆盖所有预设的(包括jquery本身预设)的javascript 对象

这个方法可以像$.getJSON一样来使用

$.reqJSON('/getjsonresponse',{param1:value1},function(data){
  //请求成功时的操作
});

如果想定义error时候的回调函数可以在参数的error位置进行.由于需要,在reqJSON内部定义了一个默认的显示错误的方法 xm_ajax_error,可以被参数中error覆盖.为了使便于说明,假设url,sentdata,success都是定义好的变量.

$.reqJSON(url,sentdata,success,function(xhr,ts,err){
  //请求错误时的操作
  alert(xhr.responseText );
});

要是想扩展其他参数,可以使用最后一个参数params,比如改成不缓存,GET请求

$.reqJSON(url,sentdata,success,error,{
  cache:false,
  type:'GET'
});

这些参数可以参考http://docs.jquery.com/Ajax/jQuery.ajax#options

应超级奶崽 和 Richet 的要求,写了一个简单的demo,用reqJSON方法进行jsonp请求,获取跨域的ajax结果.demo中用了google的ajax search API.

本文示例源代码或素材下载

编缉推荐阅读以下文章

  • web前台技术学习总结(3)-轻便型全站javascript部署
  • web前台技术学习总结(1)-CSS实现全浏览器兼容的ellipsis

Tags:web 前台 技术

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接