ajax 获取后端数据渲染到前端页面 / 跨域渲染

html

<div id="test">
    <ul>

    </ul>
</div>
<button type="button" id="ajax-but">获取ajax数据</button>

jq/ajax

<script>
    $(function () {
        $('#ajax-but').click(function () {
            //接口变量
            var url = "https://wenda.webvip.vip/index.php?v=1&appid=1&appsecret=PHPCMF980B733E7C063&s=news&c=search&pagesize=10&api_call_function=module_search_news_list";
            $.ajax({
                url:url, //接口地址
                type:"get",  //请求方式
                dataType:"json",  //数据类型
                async: true,  //同步或异步请求  true 异步请求（默认/推荐）  false 同步请求（不推荐）
                success: function(res) { //请求之后，传入返回后的数据，以及包含成功代码的字符串
                    //console.log(res);
                    var itme = res.data;
                    //console.log(itme);
                    for (var i=0;i<itme.length;i++){
                        //console.log(itme[i]);
                        $('#test ul').append('<li><a href="' + itme[i].url + '" target="_blank"><img src="' + itme[i].thumb + '" alt=""><span>' + itme[i].title + '</span></a></li>');
                    }
                },
            });
        });
    });
</script>

输出方式二：
<script>
    $(function () {
        $('#ajax-but').click(function () {
            //接口变量
            var url = "https://wenda.webvip.vip/index.php?v=1&appid=1&appsecret=PHPCMF980B733E7C063&s=news&c=search&pagesize=10&api_call_function=module_search_news_list";
            $.ajax({
                url:url, //接口地址
                type:"get",  //请求方式
                dataType:"json",  //数据类型
                async: true,  //同步或异步请求  true 异步请求（默认/推荐）  false 同步请求（不推荐）
                success: function(res) { //请求之后，传入返回后的数据，以及包含成功代码的字符串
                    //console.log(res);
                    var itme = res.data;
                    //console.log(itme);
                    var html = "";
                    for (var i=0;i<itme.length;i++){
                        //console.log(itme[i]);
                        //$('#test ul').append('<li><a href="' + itme[i].url + '" target="_blank"><img src="' + itme[i].thumb + '" alt=""><span>' + itme[i].title + '</span></a></li>');
                        html += '<li>' + itme[i].title + '</li>';
                    }
                    $("#test").html(html);
                },
            });
        });
    });
</script>

效果：