网站页面通过异步ajax请求接口json数据的方式生成一个前端显示模块
前端  /  管理员 发布于 2年前   748
环境介绍:
laravel5.5+提供api请求;
该demo是线上项目的真实例子,删除掉了一些不必要的业务逻辑代码,
这样demo看起来又简洁代码又少还能跑,完美
后端代码:
路由,在api.php文件里
//access
$api->group([
'middleware' => 'api.throttle',
'limit' => config('api.rate_limits.access.limit'),
'expires' => config('api.rate_limits.access.expires'),], function($api) {
//关联api
$api->get('askcardnews', 'DbgController@askcardnews')->name('api.dbg.askcardnews');
});
api控制器
public function askcardnews()
{
header("Access-Control-Allow-Origin: *");
$query = request()->input();
//判断
//if (!isset($query['question_id']) || !is_numeric($query['question_id'])) {return 401;}
$ask_db = DB::connection('askdb');// connection: db
...
//5条
$cardnews = DB::table('cardarticles')->select('id','title','generate_url')->orderBy('updated_at','desc')->take(5)->get()->toJson();
//5条
$cards = DB::table('CreditCard')->select('id','Name','generate_url')->orderBy('updated_at','desc')->take(5)->get()->toJson();
$res['icons'] = json_decode($cardnews,true);
$res['cards'] = json_decode($cards,true);
return json_encode($res);
}
前端代码:
<!-- s添加模块 -->
<div class="aw-mod">
<div class="mod-head"><h3>相关1</h3></div>
<div class="mod-body font-size-12">
<ul class="tab1" id="askcardnewslist"></ul>
</div>
</div>
<div class="aw-mod">
<div class="mod-head"><h3>相关2</h3></div>
<div class="mod-body font-size-12">
<ul class="tab1" id="askproductcreditcardlist"></ul>
</div>
</div>
<script type="text/javascript">
var host = "https://www.zongscan.com/api/askcardnews?question_id=110";//99
$.ajax({
url: host,
type: 'GET',
// 默认为GET
timeout: 5000,
// 超时时间
success: function success(result) {
var data = $.parseJSON(result);
getIcon(data);
getCards(data);
}
});
function getIcon(data) {
var a = "";
$.each(data.icons, function (index, item) {
a += "\n <li><a href=\"https://www.zongscan.com".concat(item.generate_url, "\" rel=\"nofollow\" target=\"_Blank\">\n <p>").concat(item.title, "</p>\n</a></li>\n ");
});
$("#askcardnewslist").append(a);
}
function getCards(data) {
var a = "";
$.each(data.cards, function (index, item) {
a += "\n <li><a href=\"https://www.zongscan.com".concat(item.generate_url, "\" rel=\"nofollow\" target=\"_Blank\">\n <p>").concat(item.Name, "</p>\n</a></li>\n ");
});
$("#askproductcreditcardlist").append(a);
}
</script>
<!-- e添加模块 -->
完
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号