黄兵的个人博客

jquery ajax方法

$.ajax()方法是jQuery最底层的Ajax实现。

<script>
    $.ajax({
        type:"POST",
        url:"/Manage/ArticleList",
        dataType:"json",
        data:{ArticleNum:$('#ArticleNum').val()},
        success:function (data) {
            $('.table tbody').empty();
            var html='';
            $.each(data,function () {
                html+='<tbody>\n' +
                    '    <tr class="row">\n' +
                    '        <td class="col-md-1 col-sm-1 col-xs-1">'+BlogsId+'</td>\n' +
                    '        <td class="col-md-2 col-sm-2 col-xs-2">'+Title+'</td>\n' +
                    '        <td class="col-md-2 col-sm-2 col-xs-2 ellipse">'+Keyword+'</td>\n' +
                    '        <td class="col-md-2 col-sm-2 col-xs-2 ellipse">'+Description+'</td>\n' +
                    '        <td class="col-md-2 col-sm-2 col-xs-2">'+CreationTime+'</td>\n' +
                    '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                    '            <a class="btn btn-sm btn-default" href="/News/Detail/3256"><i class="fa fa-info"></i>    文章详情</a>\n' +
                    '        </td>\n' +
                    '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                    '            <a class="btn btn-sm btn-primary" href="/Manage/EditArticle/3256?c=1&amp;p=8"><i class="fa fa-pencil"></i>    修改文章</a>\n' +
                    '        </td>\n' +
                    '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                    '            <a data-bind="click:showDeleteModal,attr:{ href: \'/Manage/DeleteArticle/3256\'}" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i>    删除文章</a>\n' +
                    '        </td>\n' +
                    '    </tr>\n' +
                    '</tbody>';
            })
            $('.table tbody').html(html);
        }
    });
</script>

$.each()对全局数据进行遍历。

如果没有全局数据，可以省略$.each()方法。

<script>
    $.ajax({
        type:"POST",
        url:"/Manage/ArticleList",
        dataType:"json",
        data:{ArticleNum:$('#ArticleNum').val()},
        success:function (data) {
            $('.table tbody').empty();
            var html = '';
            html += '<tbody>\n' +
                '    <tr class="row">\n' +
                '        <td class="col-md-1 col-sm-1 col-xs-1">' + data.BlogsId + '</td>\n' +
                '        <td class="col-md-2 col-sm-2 col-xs-2">' + data.Title + '</td>\n' +
                '        <td class="col-md-2 col-sm-2 col-xs-2 ellipse">' + data.Keyword + '</td>\n' +
                '        <td class="col-md-2 col-sm-2 col-xs-2 ellipse">' + data.Description + '</td>\n' +
                '        <td class="col-md-2 col-sm-2 col-xs-2">' + new Date(parseInt(data.CreationTime.replace(/\D/igm, ""))).toLocaleString() + '</td>\n' +
                '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                '            <a class="btn btn-sm btn-default" href="/News/Detail/\' + data.BlogsId + \'"><i class="fa fa-info"></i>    文章详情</a>\n' +
                '        </td>\n' +
                '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                '            <a class="btn btn-sm btn-primary" href="/Manage/EditArticle/' + data.BlogsId + '"><i class="fa fa-pencil"></i>    修改文章</a>\n' +
                '        </td>\n' +
                '        <td class="col-md-1 col-sm-1 col-xs-1">\n' +
                '            <a data-bind="click:showDeleteModal,attr:{ href: \'/Manage/DeleteArticle/\' + data.BlogsId + \'\'}" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i>    删除文章</a>\n' +
                '        </td>\n' +
                '    </tr>\n' +
                '</tbody>';
            $('.table').html(html);
            $('.next').addClass('disable');
        }
    });
</script>

如果没有需要遍历的直接删除$.each()，同时这个里面也格式化了时间。

new Date(parseInt(data.CreationTime.replace(/\D/igm, ""))).toLocaleString()

使用正则/\D/igm达到替换所有非数字的目的，\D表示非数字，igm是参数，分别表示忽视(ignore)大小写；多次、全局(global)替换；多行替换(multi-line);有一些时候还会出现+86的情况，只需要变换正则同样可以达到目的。

转换为本地时间。

参考资料：4种解决json日期格式问题的办法

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - jquery ajax方法