Javascript 如何迭代json列表并嵌入html

我调用ajax从数据库检索数据，数据以JSON格式返回。我想设计一个“视图”来显示数据。充其量，我只是将数据粘贴到视图中，然后显示数据。有人能帮我吗？
注意：这张图片是用于查看CMS的，我们起诉的是knockOutJS，我是这项技术的新手

!！[在此处输入图像描述][1]

我的消息来源：

<script type="text/javascript">

    $(function () {

        $("#btnSearch").click(function () {


            $.ajax({
                url: "../ideapark/DesktopModules/ResourcesFilter/AjaxHandler.ashx/",
                dataType: "json",
                type: "POST",
                data: {
                    'action': 'ResponseFilterSearch'
                    , 'Keyword': $('#txtbKeyword value').val()
                    , 'Skill': $("#ddlSkills option:selected").val()
                    ,'Types' : $("#ddlTypes option:selected").val()
                    , 'Topics': $("#ddlTopics option:selected").val()
                    , 'SortBy' : $("#ddlSortBy option:selected").val()
                },
                success: function(data) {
                    for(var i = 0; i < data.length; i++)
                    {
                        //t ajax handler recollection of resources.
                        //U NEED TDESERIALIZE 
                        //var resID = data.response[i].ID;
                        //var summary = data.response[i].Summary;
                        //var pageID = data.response[i].PageID;
                        //var name = data.response[i].Name;
                        //var createdOn = data.response[i].CreatedOn
                        //var Total = data.response[i].Total;



                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    console.log(errorThrown);
                    console.log(XMLHttpRequest);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        });

    });
</script>

$（函数（）{
$（“#BTN搜索”）。单击（函数（）{
$.ajax({
url:“../ideapark/DesktopModules/ResourcesFilter/AjaxHandler.ashx/”，
数据类型：“json”，
类型：“POST”，
数据：{
“操作”：“ResponseFilterSearch”
，关键字：$（'#txtbKeyword value'）.val（）
，'Skill'：$（“#ddlSkills选项：选中”）.val（）
，'Types'：$（“#ddlTypes选项：选中”）.val（）
，“主题”：$（“#主题选项：选定”）.val（）
，'SortBy'：$（“#ddlSortBy选项：选中”）.val（）
},
成功：功能（数据）{
对于（变量i=0；i

HTML

学生们开始了解秋天环境中的动物将要去哪里


也许您可以使用类似javascript的
模板库。
在success函数中，“data”保存服务器发送给您的数据。只要放一个“调试器；”在那里，检查它，并保存你想要的任何东西，无论你想保存到哪里。如果可以的话，请更具体地说明您需要什么数据以及如何操作它们。您应该研究MVC/MVVM框架/库，如Angular、Knockout等或模板框架。这就是他们擅长的；基于数据模型创建视图。我们正在使用DotNetNuke7，它附带了KnockoutJS。我将用HTML和img更新问题我想看起来怎么样给我5分钟
<div class="resourcesResult">
                        <input type="hidden" name="dnn$ctr687$View$rp_resList$ctl00$hf_resID" id="dnn_ctr687_View_rp_resList_hf_resID_0" value="71">
                        <a href="http://ideapark.rtraction.com/WebsofWonder/IWonderWhereTheAnimalsGoInTheFall.aspx">I Wonder Where The Animals Go In The Fall</a>
                        <br>
                        Students begin to understand where the animals in their environment are going in the fall
                        <br>


                                <h6>
                                    <a id="lnkBtnTags_0" href="">observing</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_1" href="">change</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_2" href="">animal</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_3" href="">fall</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_4" href="">autumn</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_5" href="">five senses</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_6" href="">winter</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_7" href="">hibernation</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_8" href="">migration</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_9" href="">adapt</a>

                                </h6>

                                <h6>
                                    <a id="lnkBtnTags_10" href="">seasons</a>

                                </h6>

                        <input type="button" value="Share">

                    </div>


</div