关于Ajax寄己封装方法 和 使用jqurey方法对比
2018-03-28 15:46
495 查看
最近项目需要from表单无刷新提交,根据返回值改变页面参数 这种事交给ajax无疑是最佳的
直接撸代码吧!
首先是原生JavaScript封装ajax: function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase(); //--------字符串转换大写
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//-----------创建对象 - 非IE6 - 第一步-----------
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //---------IE6及其以下版本浏览器-------------------
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//-----------连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null); //--------------get请求默认为null
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.stat
4000
us >= 200 && xhr.status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(xhr.status);
}
}
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
console.log(arr);
return arr.join("&");
}
var form = document.getElementById('myForm');
var save = document.getElementById('save');
save.onclick = function () {
//实例调用
ajax({
url: "http://localhost:8080/zcbishe/getBook",
type: "post",
data: {name: '001'},
dataType: "json",
success: function (response, xml) {
// 成功后执行的代码
console.log(JSON.parse(response))
},
error: function (status) {
// 失败后执行的代码
}
});
return false;
}对比下jqurey的方法: var $=jQuery;
$("#save").click(function(){
url = 'http://localhost:8080/zcbishe/getBook';
htmlobj = $.ajax({
type : "POST",
url : url,
data : $('#myForm').serialize(), //把表单序列化
async : false,
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
}
});
return false;//阻止页面刷新
});个人喜欢原生,使用类库太累赘哈哈,
但是jqurey在阻止了表单的默认submit事假后,可以直接序列化参数$('#myForm').serialize()原生代码我还没有找到方法 后面找到方法在补充如有大神路过 请指教 万分感谢~
直接撸代码吧!
首先是原生JavaScript封装ajax: function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase(); //--------字符串转换大写
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//-----------创建对象 - 非IE6 - 第一步-----------
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //---------IE6及其以下版本浏览器-------------------
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//-----------连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null); //--------------get请求默认为null
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.stat
4000
us >= 200 && xhr.status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(xhr.status);
}
}
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
console.log(arr);
return arr.join("&");
}
var form = document.getElementById('myForm');
var save = document.getElementById('save');
save.onclick = function () {
//实例调用
ajax({
url: "http://localhost:8080/zcbishe/getBook",
type: "post",
data: {name: '001'},
dataType: "json",
success: function (response, xml) {
// 成功后执行的代码
console.log(JSON.parse(response))
},
error: function (status) {
// 失败后执行的代码
}
});
return false;
}对比下jqurey的方法: var $=jQuery;
$("#save").click(function(){
url = 'http://localhost:8080/zcbishe/getBook';
htmlobj = $.ajax({
type : "POST",
url : url,
data : $('#myForm').serialize(), //把表单序列化
async : false,
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
}
});
return false;//阻止页面刷新
});个人喜欢原生,使用类库太累赘哈哈,
但是jqurey在阻止了表单的默认submit事假后,可以直接序列化参数$('#myForm').serialize()原生代码我还没有找到方法 后面找到方法在补充如有大神路过 请指教 万分感谢~
相关文章推荐
- 使用对象封装ajax重复调用的方法
- ajax使用serialize()方法后,数据无法封装并获取(PUT提交方式!)
- 使用Promise封装简单Ajax方法
- 关于apicloud开发中对vue和ajax方法的封装
- 关于 ie 下使用 iframe 加载子页面时,子页面ajax数据能进入success方法,但是数据为空的问题
- 关于ajax的使用方法_例题、ajax的数据处理
- Signaltap使用transitional模式. FPGA封装的对比方法
- Ajax的原生实现关于MIME类型的使用方法
- AJAX中关于多个UpdatePanel 的 UpdateProgress 的使用方法
- 关于使用JdbcTemplate封装的方法执行原生sql语句的常用写法
- 基于原生ajax与封装的ajax使用方法(详解)
- AJAX不同方法的对比使用
- Ajax使用方法,经典Ajax封装,可接收解析后台传回的json对象和json数组
- 关于IE 使用AJAX报错:“Stream ended unexpectedly”的解决方法
- 关于ajax的url,data,success,error封装方法。(易与后期修改维护)
- Ajax的四步骤使用和Ajax的方法封装回调函数
- 关于ajax页面里的js方法无法使用的解决办法
- 关于AJAX中mootools方法的使用
- 关于使用VS.Net2003调试器出现的问题及相关解决方法
- 关于Hibernate在使用load方法时需要主要的