Ajax 请求 ES5,ES6,ES7的不同写法

登录Form：

<form class="form-aaa" method="post"><%ES6, 7%>
<form class="form-aaa" action="${path}/user/dologin" method="post"> <%ES5%>
    <h2 class="form-signin-heading">用户登录</h2>
    <label for="username" class="sr-only">用户名</label>
    <input type="text" id="username" name="name" class="form-control" placeholder="用户名" required autofocus>
    <br />
    <label for="inputPassword" class="sr-only">密码</label>
    <input type="password" id="inputPassword" name="pwd" class="form-control" placeholder="密码" required>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="remember-me">
            记住我 </label>
    </div>
    <input class="btn btn-lg btn-primary btn-block ajax-post" type="submit" value="登录" target-form="form-aaa">
</form>

ES5:

//dom加载完成后执行的js
$(function(){
    //ajax post submit请求
    $('.ajax-post').click(function(){
        var target,query,form;
        var target_form = $(this).attr('target-form');
        var that = this;
        if ($(this).attr('type')=='submit') {
            form = $('.'+target_form);
            query = form.serialize();
            target = form.get(0).action;
            $.post(target, query, function(data) {
                if (data.code === 200) {
                    $.toast({
                        heading: '操作成功',
                        icon: 'success',//info, warning,error
                        showHideTransition: 'slide',//fade,plain
                        hideAfter: 2000,//ms
                        position: 'top-center'
                    });
                    setTimeout(function(){
                        if (data.info.url) {
                            window.location.href= data.info.url;
                        } else if( $(that).hasClass('no-refresh')){
                            $(that).removeClass('disabled').prop('disabled',false);
                        }else{
                            location.reload();
                        }
                    },2300);
                }else{
                    $.toast({
                        heading: '操作失败',
                        text: data.info.info,
                        icon: 'error',
                        hideAfter: 2000,
                        position: 'top-center'
                    });
                }
            }, 'json');
        }
        return false;
    });
});

ES6:

request.js
// 用promise对象封装
const request = (params) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: params.url,
            type: params.type || 'get',
            dataType: 'json',
            headers: params.headers || {},
            data: params.data || {},
            success(res) {
                resolve(res)
            },
            error(err) {
                reject(err)
            }
        })
    });
};

$(function () {
    $('.ajax-post').click(function(){
        request({
            url:"${path}/user/dologin",
            type: 'post',
            data:$("#userForm").serialize()
        }).then(res => {
            if(res.code === 200){
                window.location.href= "${path}/user/main";
            }else {
                alert(res.info.info);
                $.toast({
                    heading: '操作失败',
                    icon: 'error',
                    hideAfter: 2000,//ms
                    position: 'top-center'
                });
            }
        });
    });
});

ES7:

$(function () {    
    $('.ajax-post').on('click', clickHandler); 
    async function clickHandler() { 
        try { 
            const res = await request({ 
                url:"${path}/user/dologin", 
                type: 'post', 
                data:$("#userForm").serialize() }); 
            if(res.code === 200){ 
                window.location.href= "${path}/user/main"; }
            else { 
                alert(res.info.info); } 
        } 
        catch(err) { 
            console.log(err) 
        } 
    }
});