备注:我们经常会遇到使用jquery获取某个地址下的部分页面内容,然后替换当前页面对应内容,也就是:局部刷新功能。
当然也可以使用get/post请求获取数据,修改数据,可以参考以下JS代码:
走过的坑:
1-$.ajax 参数: dataType 是区分大小写的,写成了datatype会不识别的???
2- window["Ajax"] = Ajax; 写为: window["Ajax"] =new Ajax(); 这种单例如果作为全局变量报错的话,在高并发的请求下会出现: window.Ajax 实例里参数信息是会共享,参数信息被覆盖等问题???
3-$.ajax Post/Get 回调方法使用window.Ajax和this访问属性,这里经过改造后,在函数里面声明一个: var _this=this; 就可以在回调函数内部实现 内部实例数据共享了,也会防止出错???
下面JS的使用示例:
new window.Ajax().Init_Two("postUrl", { u: userid, e: base64Email, t: token }, function (jsonData) { //success code }).Post();
自定义模拟类-其中Init()方法是个人项目需要使用,大家可以使用Init_Two方法初始化,如上示例:
// 2-Ajax模拟类 var Ajax = function () { var _this = this; //请求路径 _this.ajaxUrl = ""; //传入的参数对象 _this.data = {}; //返回数据类型:json/jsonp/xml/text... _this.dataType = "text"; //是否异步 _this.isAsync = true, //回调函数 _this.rollBack = function (result) { }; _this.Init = function (handlerName, actionName, dataObject, rollBack) { _this.ajaxUrl = "/ajax/" + handlerName + ".js?action=" + actionName; _this.data = dataObject; _this.rollBack = rollBack; return _this; }; _this.Init_Two = function (actionUrl, dataObject, rollBack) { _this.ajaxUrl = actionUrl; _this.data = dataObject; _this.rollBack = rollBack; return _this; }; //Get请求 _this.Get = function (dataType, isAsync) { if (dataType != null) { _this.dataType = dataType; }; if (isAsync != null) { _this.isAsync = isAsync; }; $.ajax({ type: "GET", url: _this.ajaxUrl, data: _this.data, dataType: _this.dataType, async: _this.isAsync,//false代表只有在等待ajax执行完毕后才执行 success: function (json) { var result = json; if (_this.dataType == "text") { try { result = JSON.parse(json); } catch (e) { result = new Function("return " + json)(); } } if (_this.rollBack && _this.rollBack instanceof Function) { _this.rollBack(result); } }, error: function (e) { console.log(e); } }); }; //获取请求地址的HTML内容(select选择器,是否异步) _this.GetHtml = function (jquerySelectDom, isAsync) { if (isAsync != null) { _this.isAsync = isAsync; } $.ajax({ type: "GET", url: _this.ajaxUrl, data: _this.data, dateType: "html", //false代表只有在等待ajax执行完毕后才执行 async: _this.isAsync, success: function (data) { if (jquerySelectDom != "") { var $data = $(data); //由于$data是个集合,得到的是所有一级节点的jquery集合,所以,先从一级集合中找,再从所有子元素中找 var $result = $data.next(jquerySelectDom); if ($result.length == 0) { $result = $data.find(jquerySelectDom); } var resultHtml = ""; if ($result.length > 0) { resultHtml = $result.html(); } if (_this.rollBack && _this.rollBack instanceof Function) { _this.rollBack(resultHtml); } } else { return data; } } }); }; //普通Post请求(请求地址:postUrl,,是否异步) _this.Post = function (dataType, isAsync) { if (dataType != null) { _this.dataType = dataType; }; if (isAsync != null) { _this.isAsync = isAsync; }; $.ajax({ type: "POST", url: _this.ajaxUrl, data: _this.data, dataType: _this.dataType, //false代表只有在等待ajax执行完毕后才执行 async: _this.isAsync, success: function (json) { var result = json; if (_this.dataType == "text") { try { result = JSON.parse(json); } catch (e) { result = new Function("return " + json)(); } } if (_this.rollBack && _this.rollBack instanceof Function) { _this.rollBack(result); } }, error: function (e) { console.log(e); } }); }; //模拟Form表单请求-参数为FormData对象 _this.FormPost = function () { $.ajax({ type: "POST", url: _this.ajaxUrl, data: _this.data, //false代表只有在等待ajax执行完毕后才执行 async: _this.isAsync, processData: false, contentType: false, success: function (json) { try { result = JSON.parse(json); } catch (e) { result = new Function("return " + json)(); } if (_this.rollBack && _this.rollBack instanceof Function) { _this.rollBack(result); } }, error: function (e) { console.log(e); } }); }; }; window["Ajax"] = Ajax;