前言
在一個項目中,前後端的交互是很頻繁的。
有的是要獲取一個數據,有的是要改標一個狀態,有的是需要提交用戶輸入,有的是要上傳一個文件,本文就是這麼的一個代碼
/**
* 通用的js前後端交互代碼
* 依賴layer.js
* ajaxPost處理本頁提交的js請求,不對返回結果做處理,只 '顯示' 或者 '刷新頁面' 或者 '跳轉'
* ajaxGet同上,但是沒有data選項,如果有數據發送,跟隨在url中
* ajaxFile表單文件提交
* ajaxForm表單提交
* 表單提交的時候,需要提交的選項用class="send-item"標識,默認必填項。
* 內容提示先獲取data-msg的值,如果沒有,獲取palceholder的值。
* 如果不是必填項,需要添加no-required,即class="send-item no-required"
* 表單帶有文件上傳的時候有兩種,一種是先上傳文件,獲得返回值即文件的存儲路徑,提交表單的時候提交文件存儲路徑,請使用ajaxForm
* 如果文件內容跟隨表單提交,請使用ajaxFile
*/
function ajaxPost(url, data){
layer.closeAll('msg');
layer.load();
$.ajax({
url: url,
data: data,
type: 'post',
dataType: 'json',
success: function(res){
success(res);
}
})
}
function ajaxGet(url){
layer.closeAll('msg');
layer.load();
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function(res){
success(res);
}
})
}
function ajaxFile($form,tips){
layer.closeAll('msg');
var url = $form.prop('action');
var data = new FormData();
var status = true;
$form.find('.send-item').each(function(index,elem){
if(!status){
return false;
}
var name = elem.name;
var value = elem.value;
var type = elem.type;
var msg = $(elem).data('msg') || elem.placeholder;
if(type != 'password'){
value = value.trim();
}
if(elem.type == 'checkbox' && !elem.checked){
if(tips){
layer.tips(msg, $(elem), {tips: 2, time: 1e3});
}else{
layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
}
status = false;
}
if(elem.type == 'file' && !elem.files[0]){
if(tips){
layer.tips(msg, $(elem).parent(), {tips: 2, time: 1e3});
}else{
layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
}
status = false;
}
if(status && value == '' && !$(this).hasClass('no-required')){
if(tips){
layer.tips(msg, $(elem), {tips: 2, time: 1e3});
}else{
layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
}
status = false;
}
if(elem.type == 'file'){
var file = elem.files[0];
data.append('upload[]', file, file.name);
}else{
data.append(name,value);
}
});
if(!status){
return false;
}
layer.load();
$.ajax({
url: url,
data: data,
type: 'post',
processData: false,
contentType: false,
dataType: 'json',
success: function(res){
success(res);
}
})
}
function ajaxForm($form,tips){
var url = $form.prop('action');
var data = {};
var status = true;
$form.find('.send-item').each(function(index,elem){
if(!status){
return false;
}
var name = elem.name;
var value = elem.value;
var type = elem.type;
var msg = $(elem).data('msg') || elem.placeholder;
if(type != 'password'){
value = value.trim();
}
if(elem.type == 'checkbox' && !elem.checked){
if(tips){
layer.tips(msg, $(elem), {tips: 2, time: 1e3});
}else{
layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
}
status = false;
}
if(status && value == '' && !$(this).hasClass('no-required')){
if(tips){
layer.tips(msg, $(elem), {tips: 2, time: 1e3});
}else{
layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
}
status = false;
}
data[name] = value;
});
if(!status){
return false;
}
layer.load();
$.ajax({
url: url,
data: data,
type: 'post',
dataType: 'json',
success: function(res){
success(res);
}
})
}
function success(res){
/**
* @res = {status: 1, msg: '', url: ''};
* @status => 0 失敗
* @status => 1 成功
* @msg => '提示'
* @url => 'reload' 頁面需要刷新
* @url => '/base' 頁面跳轉到'/base'
*/
layer.closeAll('loading');
if(res.msg){
layer.msg(res.msg, {icon: res.status, time: 2e3, maxWidth: 260}, function(){
if(res.url == 'reload'){
window.location.reload();
return false;
}
if(res.url){
window.location.href = res.url;
}
});
}else{
if(res.url == 'reload'){
window.location.reload();
return false;
}
if(res.url){
window.location.href = res.url;
}
}
}