ApiCloud 使用ajax显示内容

最新推荐文章于 2022-07-28 11:25:17 发布

小飞鱼通达二开

最新推荐文章于 2022-07-28 11:25:17 发布

阅读量457

点赞数

分类专栏：钉钉开发文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/upi2u/article/details/122219748

版权

钉钉开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

apicloud开发移动端应用有很多优势，经过一些摸索对其有了简单的了解。官方的文档内容很多，需要一些时间来慢慢阅读消化，这里我们通过几个小实例来快速掌握apicloud的主要操作方法。

由于页面都是html格式的，所以页面上的动态内容都需要采用ajax方法从服务器端获取然后绑定到页面标签上来进行显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript" src="script/zepto.min.js"></script>
    <style>
    body {
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .content{
        -webkit-box-flex:1;
        margin-top: 45px;
    }

    </style>
</head>
<body>

<div class="content">
    <div class="margin-top:50px"><a href="html/login.html">登录页面</a></div>
</div>


        <div class="find_nav_list" id="index_mun">
            <ul>
                <!--这里是我要获取到inde_x_mun的栏目列表-->
            </ul>
        </div>


</body>
</html>


<script type="text/javascript">

$(function(){
    apiready = function () {  //注意，使用apicloud的 api时必需要使用apiready
        api.showProgress();//显示加载进度框
        api.ajax({
            url: 'http://abc.vip.com/test/apicloud/1list-test.php',  
            method: 'post',
            dataType: 'html',
            returnAll:false,
            data:{
              values:{cid:1}
            },
        }, function(ret, err) {
            api.hideProgress();//隐藏加载进度框
            if(ret){
                html = "";

                html += ret;
                $('#index_mun').append(html);//在ul元素结尾插入html内容
            }else{
                api.alert({msg:('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode)});
            }
        });
    }
});
</script>

服务器后端程序

这里为了简化操作直接输出内容然后展现在前端页面，正常使用推荐还是使用json格式

<?php
echo "<b>你好啊，小飞鱼!</b>";
?>

使用apicloud进行本地编译，手机扫码下载安装apk文件后打开软件就能看到执行的效果，服务器输出的内容直接显示到页面上。

小飞鱼通达二开

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录