您的位置:首页 > 其它

关于Ajax寄己封装方法 和 使用jqurey方法对比

2018-03-28 15:46 441 查看
最近项目需要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()原生代码我还没有找到方法  后面找到方法在补充如有大神路过 请指教  万分感谢~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: