在Jquery

Question

我的用户界面使用REST API并将数据作为json获取。我将此数据附加到HTML中，如下所示，但我的脚本文件非常大且可读性低。

所以我正在寻找一种将json数据导入HTML的新方法。有没有办法用jQuery做到这一点？

我听说过某事。与AngularJS但我没有时间学习另一个fw或图书馆。如果可能的话，我想用jQuery来做。

function publish_survey() {
    $.ajax({
        url : URL_API + URL_POLL,
        type : 'get',
        data : {'user_id' : user_id},
        dataType: 'json',
        success : function (response) {
            console.log(response);
            var html = '';
            for (var i = 0; i < response.data.length; i++) {
                var date = new Date(response.data[i].created_at);
                var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

                html += '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' +
                            '<div class="mt-card-item" onclick="">' +
                                '<div class="mt-card-avatar mt-overlay-1">' +
                                    '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' +
                                    '<div class="mt-overlay">' +
                                        '<ul class="mt-info">' +
                                            '<li>' +
                                                '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+response.data[i].id+'\');">' +
                                                    '<i class="fa fa-eye"></i>' +
                                                '</a>' +
                                            '</li>' +
                                        '</ul>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="mt-card-content">' +
                                    '<h3 class="mt-card-name">' + response.data[i].title + '</h3>' +
                                    '<p style="font-size:10px;">' + formatted_date + '</p>' +
                                    '<div class="mt-card-social">' +
                                        '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+response.data[i].id+'\');">'+LANG.option.select+'</button>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>';

            }

            $('#poll-publish > .row').append(html);
        }
    });
}

Answer 1

很大程度上取决于您必须与哪些浏览器保持兼容。您可以采取一些措施来改进现有代码，但最佳解决方案需要更新的浏览器（或转换器）。

首先，我建议您使用提取方法技术将服务器查询逻辑与格式化逻辑分开。 （这适用于任何浏览器。）这样做的原因是它至少将代码的“make HTML”部分与代码的“query-the-server”部分隔离开来，并且即使它仍然相当长。所以考虑一下这个重构：

function publish_survey() {
    $.ajax({
        url : URL_API + URL_POLL,
        type : 'get',
        data : {'user_id' : user_id},
        dataType: 'json',
        success : function (response) {
            console.log(response);
            var html = '';
            for (var i = 0; i < response.data.length; i++) {
                html += make_html_for_card(response.data[i]);
            }

            $('#poll-publish > .row').append(html);
        }
    });
}

function make_html_for_card(card) {
    var date = new Date(card.created_at);
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

    return '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' +
        '<div class="mt-card-item" onclick="">' +
            '<div class="mt-card-avatar mt-overlay-1">' +
                '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' +
                '<div class="mt-overlay">' +
                    '<ul class="mt-info">' +
                        '<li>' +
                            '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+card[i].id+'\');">' +
                                '<i class="fa fa-eye"></i>' +
                            '</a>' +
                        '</li>' +
                    '</ul>' +
                '</div>' +
            '</div>' +
            '<div class="mt-card-content">' +
                '<h3 class="mt-card-name">' + card[i].title + '</h3>' +
                '<p style="font-size:10px;">' + formatted_date + '</p>' +
                '<div class="mt-card-social">' +
                    '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+card[i].id+'\');">'+LANG.option.select+'</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';
}

这并没有从根本上改变代码的行为;它只是让publish_survey()更容易阅读和推理，因为它更短：所有HTML格式的垃圾都在一个函数中，负责只格式化HTML而不做任何其他事情。如果你这么做了，你可以想象将所有的HTML格式化函数放在一起，甚至将它们移动到一个单独的JavaScript文件中，以便实际将你的应用程序逻辑与你的表示代码分开。

虽然该解决方案确实将HTML移开了，但该解决方案没有解决的问题是如何使嵌入式HTML本身看起来不那么难看：编码的HTML很难看，工作很痛苦与维护。当然必须有更好的方法，我认为这正是你的问题所在。

现代JavaScript（ES6）包含一个新的template literal（或模板字符串），这是一个新的JavaScript功能，旨在解决此问题。你使用反引号（`）来包装字符串，而不是撇号或双引号。在模板字符串中，您可以正常使用换行符，并且可以使用花括号嵌入内容。因此，如果您支持模板文字，make_html_for_card()函数就会变成这样：

function make_html_for_card(card) {
    var date = new Date(card.created_at);
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

    return `
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="mt-card-item" onclick="">
                <div class="mt-card-avatar mt-overlay-1">
                    <img src="{PATH_LAYOUT_IMAGES}/poll_bg.png" />
                    <div class="mt-overlay">
                        <ul class="mt-info">
                            <li>
                                <a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll('{card[i].id}');">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mt-card-content">
                    <h3 class="mt-card-name">{card[i].title}</h3>
                    <p style="font-size:10px;">{formatted_date}</p>
                    <div class="mt-card-social">
                        <button class="btn blue-hoki btn-block" onclick="selectPoll(this, '{card[i].id}');">{LANG.option.select}</button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

结果代码不那么令人不愉快：它只是纯HTML，包含在反引号（`）中，并且在嵌入内容周围有{花括号}。

可悲的是，并非所有浏览器都支持此功能。值得注意的是，IE不是，但Edge 13+，以及Chrome 41 +，Firefox 34+和Safari 9.1+。 （提供完整的浏览器支持列表here。）

如果您必须向后兼容不支持模板文字的浏览器，那么您真正清理代码的唯一机会就是使用 transpiler （例如BabelJS ），它允许你编写使用模板文字之类的东西的现代JS代码，然后转换器自动将代码转换为“旧的”JS代码，用于无法处理新功能的浏览器。

Answer 2

更新**我显然没有阅读文档，需要在花括号$前面加上$ {job_title}

这很酷，但花括号似乎无济于事，它们也显示在html中。 下面是我的代码：

function make_html_for_card(job) {
console.log(job.job_title)
//just testing
var job_title = job.job_title
return `
                    <a href="single-job-page.html" class="job-listing">


                        <!-- Job Listing Details -->
                        <div class="job-listing-details">

                            <!-- Logo -->
                            <div class="job-listing-company-logo">
                                <img src="static/images/apple-touch-icon.png" alt="no-image">
                            </div>

                            <!-- Details -->
                            <div class=" job-listing-description">
                                <h3 class="job-listing-title">{job_title}</h3>

                                <!-- Job Listing Footer -->
                                <div class="job-listing-footer">
                                    <ul>
                                        <li><i class="icon-material-outline-business"></i> {job.company_name} <div
                                                class="verified-badge" title="Verified Employer"
                                                data-tippy-placement="top"></div>
                                        </li>
                                        <li><i class="icon-material-outline-location-on"></i>{job.location_city}</li>
                                        <li>
                                            <ilass="icon-material-outline-business-center"></i>{job.full_time_part_time}
                                        </li>
                                        <li><i class="icon-material-outline-access-time"></i>{job.posted_date}</li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Bookmark -->
                            <span class="bookmark-icon"></span>
                        </div>
                    </a>
`;

}