ajax调用接口数据，加密只允许本网站域名访问

小编就以本站为例讲解吧，下面附上了ajax前端的代码，自己另行修改就可以了。

$(function() {
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 8; /*一次加载几条*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(document).on('click', '.more', function() {
counter++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
function getData(offset, size) {
$.ajax({
type: 'POST',
url: 'https://www.zcabc.com/e/extend/api/index.php?m=index&c=article',
//此条为接口的数据，另行自己开发配置接口就可以，这边是php的接口
dataType: 'json',
data: {
userss: "https://www.zcabc.com/"
},
success: function(reponse) {
var data = reponse.result;
console.log(reponse.result)
var sum = reponse.result.length;
var result = '';
// console.log(offset , size, sum);
// 如果剩下的记录数不够分页，就让分页数取剩下的记录数
if (sum - offset < size) {
        size = sum - offset;
}
for (var i = offset; i < (offset + size); i++) {
var timestamp3 = data[i].newstime;
var newDate = new Date();
newDate.setTime(timestamp3 * 1000);
                            result += '<div class="col-sm-6 col-md-4 col-lg-3">' +
              '<article id="post-208" class="post post-grid post-208 type-post status-publish format-standard has-post-thumbnail sticky hentry category-life category-life-2 tag-2 tag-103 tag-83 tag-102">' +
                            '<div class="entry-media">' +
                            '<div class="placeholder" style="padding-bottom: 66.666666666667%;">' +
                            '<a href="' + data[i].titleurl + '">' +
                                '<img class="lazyload" data-src="' + data[i].titlepic + '" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="' +
                                data[i].title + '">' +
                                '</a>' +
                                '</div>' +
                                '</div>' +
                                '<div class="entry-wrapper">' +
                                '<a class="grid_author_avt">' +
                                '<div class="grid_author_bggo avatar bg-cover" style="background-image: url(/static/image/1.png);"></div>' +
                                '</a>' +
                                '<header class="entry-header">' +
                                '<div class="entry-meta">' +
                                '<span class="meta-category">' +
                '<a rel="category"> <i class="dot"></i> 众筹栈 </a>' +
                                '</span>' +
                                '</div>' +
                                '<h2 class="entry-title"><a href="' + data[i].titleurl + '" rel="bookmark">' + data[i].title + '</a></h2>' +
                                '</header>' +
                                '<div class="entry-excerpt u-text-format">' + data[i].smalltext + '</div>' +
                                '<div class="entry-footer">' +
                                '<a>' +
                                '<time datetime="' + newDate.toLocaleDateString() + '"><i class="fa fa-clock-o"></i>' + newDate.toLocaleDateString() +
                                '</time>' +
                            '</a>' +
                            '<a><span><i class="fa fa-eye"></i>' + data[i].onclick + '</span></a>' +
                                '<a><span><i class="fa fa-comments-o"></i>' + data[i].plnum + '</span></a>' +
                                '</div>' +
                                '</div>' +
                                '</article>' +
              '</div>';
}
$('.text').append(result);
/*隐藏more按钮*/
if ((offset + size) >= sum) {
        $(".more").hide();
} else {
        $(".more").show();
}
},
error: function(xhr, type) {
console.log(error);
}
});
}