jquery发起get/post请求_或_获取html页面数据

时间:2023-03-09 03:38:20
jquery发起get/post请求_或_获取html页面数据

备注:我们经常会遇到使用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;