不需要修改success 模板,这是从onethink1.1后台得到提示得到的启发
首先是需要用到的页面链接一个js文件,该文件内容如下
//dom加载完成后执行的js
$(function(){
//ajax get请求
$('.ajax-get').click(function(){
var target;
var that = this;
if ( $(this).hasClass('confirm') ) {
if(!confirm('确认要执行该操作吗?')){
return false;
}
}
if ( (target = $(this).attr('href')) || (target = $(this).attr('url')) ) {
$.get(target).success(function(data){
if (data.status==1) {
if (data.url) {
updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
}else{
updateAlert(data.info,'alert-success');
}
setTimeout(function(){
if (data.url) {
location.href=data.url;
}else if( $(that).hasClass('no-refresh')){
$('#top-alert').find('button').click();
}else{
location.reload();
}
},1500);
}else{
updateAlert(data.info);
setTimeout(function(){
if (data.url) {
location.href=data.url;
}else{
$('#top-alert').find('button').click();
}
},1500);
}
});
}
return false;
});
//ajax post submit请求
$('.ajax-post').click(function(){
var target,query,form;
var target_form = $(this).attr('target-form');
var that = this;
var nead_confirm=false;
if( ($(this).attr('type')=='submit') || (target = $(this).attr('href')) || (target = $(this).attr('url')) ){
form = $('.'+target_form);
if ($(this).attr('hide-data') === 'true'){//无数据时也可以使用的功能
form = $('.hide-data');
query = form.serialize();
}else if (form.get(0)==undefined){
return false;
}else if ( form.get(0).nodeName=='FORM' ){
if ( $(this).hasClass('confirm') ) {
if(!confirm('确认要执行该操作吗?')){
return false;
}
}
if($(this).attr('url') !== undefined){
target = $(this).attr('url');
}else{
target = form.get(0).action;
}
query = form.serialize();
}else if( form.get(0).nodeName=='INPUT' || form.get(0).nodeName=='SELECT' || form.get(0).nodeName=='TEXTAREA') {
form.each(function(k,v){
if(v.type=='checkbox' && v.checked==true){
nead_confirm = true;
}
})
if ( nead_confirm && $(this).hasClass('confirm') ) {
if(!confirm('确认要执行该操作吗?')){
return false;
}
}
query = form.serialize();
}else{
if ( $(this).hasClass('confirm') ) {
if(!confirm('确认要执行该操作吗?')){
return false;
}
}
query = form.find('input,select,textarea').serialize();
}
$(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
$.post(target,query).success(function(data){
//alert(data.status);
//alert(JSON.stringify(data));
if (data.status==1) {
if (data.url) {
updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
}else{
updateAlert(data.info ,'alert-success');
}
setTimeout(function(){
$(that).removeClass('disabled').prop('disabled',false);
if (data.url) {
location.href=data.url;
}else if( $(that).hasClass('no-refresh')){
$('#top-alert').find('button').click();
}else{
location.reload();
}
},1500);
}else{
updateAlert(data.info);
setTimeout(function(){
$(that).removeClass('disabled').prop('disabled',false);
if (data.url) {
location.href=data.url;
}else{
$('#top-alert').find('button').click();
}
},200);
}
});
}
return false;
});
msgClose = function (o){
o.remove();
}
window.updateAlert = function (text,c) {
var mask=document.createElement("div");
mask.className="mask";
var msg=document.createElement("div");
msg.className="msg";
var msgTitle=document.createElement("div");
msgTitle.className="msg-title";
msgTitle.innerHTML="提示信息";
msg.appendChild(msgTitle);
var a=document.createElement("a");
a.href="javascript:;"
a.innerHTML="X";
a.onclick = function(){
msgClose(mask);
}
msgTitle.appendChild(a);
var msgContent=document.createElement("div");
msgContent.className="msg-title";
msgContent.innerHTML=text;
var cc=document.createElement("div");
var t=document.createElement("span");
t.innerHTML=2;
cc.appendChild(t);
cc.className="c";
$(cc).append("秒后自动关闭");
msgContent.appendChild(cc);
msg.appendChild(msgContent);
mask.appendChild(msg);
document.body.appendChild(mask);
var st = setInterval(function(){
var myDate = new Date();
t.innerHTML = t.innerHTML - 1;
if(t.innerHTML==0){
msgClose(mask);
window.clearInterval(st);
}
},1000);
};
});还有一个css文件,内容如下/*遮罩*/
.mask {
height:100%;
width:100%;
position:fixed;
top:0;
z-index:1000;
background-color: #000;
background-color: rgba(0,0,0,0.7);
}
.msg{
position: absolute;
z-index: 1003;
left: 50%;
top: 200px;
width: 450px;
margin-left: -225px;
font-size: 14px;
border: 3px solid #ccc;
background-color: #fff;
}
.msg .msg-title{
/* height: 20px;*/
padding: 12px;
background-color: #FAFAFA;
border-bottom:1px solid #E6E6E6;
text-align: center;
}
.msg .msg-title a{
color: #A1A1A1;
float: right;
}
.msg .msg-title a:hover{
text-decoration:none;
color: #4D4538;
}
.msg .msg-content
{
padding: 30px;
}然后再需要用到的提交按钮添加class="ajax-post"和target-form="form-horizontal"如下: <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>如果不是表单,那么直接在对应的元素添加class="ajax-get" 如下 :<a class="ajax-get" href="{:U('User/logout')}">[退出]</a> 最佳答案