前言：
ajax在开发使用过程中，遇到必须使用原生的javascript上传文件，显示文件上传进度，参考1.1；使用jquery时提交formData数据，且在ajax请求前触发的方法实际，请求完成后触发的方法事件，常用于加载等待效果，参考2.3
一：javascript的ajax
1）使用javasript原生的ajax请求，传递formData参数，得到上传进度参数：
var xhr = new XMLHttpRequest();
xhr.open('POST',URL,false);//false表示异步
xhr.onload = function (e) {
if (xhr.status === 200) {
var data = eval('('+xhr.responseText+')')//转json
} else {
console.log("调用失败")
}
};
xhr.onerror = function (e) {
};
// issues #45 提到似乎有兼容性问题,关于progress
xhr.upload.onprogress = function (e) {
// 上传进度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加参数和触发上传
// rst.formData.append('a', '我是参数');
xhr.send(rst.formData);
2）原生javascript的ajax原生模板：
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.2.2 建立连接, 发送数据
xmlhttp.open("POST","/day17/checkNicknameServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nickname=" + nicknameVal);
// 2.2.3 处理响应数据
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
}
}
二：jquery的ajax
1）常用的原生模板
$.ajax({
type : "get", // 请求方式
url : URL, // 请求路径
data : "username=" + usernameVal, // 浏览器给服务器的数据
success : function(data) { // data 指服务器给浏览器的数据
}
});
2）简洁的ajax方式：
$.get(url, {key : value}, function(data) {
});
3）提交formData数据,以xml形式提交（默认string）：
var tbData = [{id:"111",name:"222"},{id:"111",name:"222"},{id:"111",name:"222"}]
var formData = new FormData($( "#form-admin-add" )[0]);
formData.append("submitData",tbData);
$.ajax({
url: contextPath+"/mc/biddingManager/saveData",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,//false表示传递的参数以xml方式发送给浏览器而不是默认的string方式
type: 'POST',
dataType: 'json',
beforeSend : function() {
isSubmit = false;
},
complete:function(){
isSubmit = true;
},
success: function(data) {
if (data.respCode == "00000") {
alert(data.memo,function(){
window.location=contextPath+"/mmc/biddingManager/index";
});
isSuccess = false;
}else if (data.respCode == "02002") {
confirm('您未登录，是否去登录', '去登入', '取消', logins);
} else {
alert(data.memo);
isSubmit = true;
}
},
error:function(data){
isSubmit = true;
}
});