ajax post demo

最新推荐文章于 2020-04-20 23:40:13 发布

louisfinder

最新推荐文章于 2020-04-20 23:40:13 发布

阅读量662

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013179809/article/details/48415801

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、html

<input type="submit" class="button ajax-post" value=" 确定 " />

2、引入jquery

<script type="text/javascript" src="__JS__/jquery-1.11.1.js"></script>

3、引入css

.fixed{
    position: fixed!important;
}
/* 提醒框 */
.alert {
    color: #c09853;
    font-weight: bold;
    border: 1px solid #fbeed5;
    background-color: #fcf8e3;
}
.alert .close {
    float: right;
    position: relative;
    top: -2px;
    right: -21px;
    font: bold 20px/20px arial;
    color: #c09853;
    opacity: 0.4;
}
.alert .close:hover {
    opacity: 0.6;
}
button.close {
    padding: 0;
    cursor: pointer;
    border: 0 none;
    background: none;
}
.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}
.alert-info {
    background-color: #D9EDF7;
    border-color: #BCE8F1;
    color: #3A87AD;
}
.alert-error {
    color: white;
    border-color: #eed3d7;
    background-color: #FF6666;
}
.alert-success {
    color: #468847;
    background-color: #CCFF99;
    border-color: #eed3d7;
}
#top-alert {
    display: block;
    top: -10px;
    left: 10px;
    right: 11px;
    z-index: 3000;
    margin-top: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
    font-size: 16px;
}
#top-alert .close{
    right:14px;
    position: fixed;
    top:4px;
}
.alert-content{
    margin-left: 14px;
    max-width:600px;
    word-wrap: break-word;
    word-break: break-word;
}
4、js代码

$('.ajax-post').click(function(){
    var form = $(this).closest('form');
    var formdata = form.serialize();
    var url = form.attr('action');
    console.debug(url);
    $.post(url,formdata,function(data){
        updatealert(data);
    });

   return false;
});

function updatealert(data){
    console.debug(data);
    var top_alert = $("#top-alert");
    if(data.status){
        top_alert.addClass('alert-success');
    } else {
        top_alert.addClass('alert-error');
    }
    $('.alert-content').text(data.info);
    top_alert.show();
    setTimeout(function(){
        if(data.url){
            location.href =data.url;
        }else{
            top_alert.hide();
        }
    },'2000');
}