Question

我正在尝试在HTML文件中创建动态时间轴小部件，如图所示：

当我从JSON URL解析数据时，它工作正常。这部分如下所示：

    var filename = "snow-patrol.json",
    bandId = filename.replace(".json","");

$.ajax({
    type: "GET",
    url: filename,
    dataType: "json",
    success: function(data){
        init(data);
    }
});

现在，我试图在AJAX查询中使用静态JSON字符串，而不是使用URL：

    $.ajax({
    type: "GET",
    url: filename,
    data: JSON.stringify({"dummy" : "","yearStarted" : 1994, "row" : [{"id" : "garyL","name" : "One","yearJoined" : 2007,"yearLeft" : 2015},{"id" : "markM","name" : "Two","yearJoined" : 2001,"yearLeft" : 2005}]}),
    dataType: "json",
    success: function(data){
        init(data);
    }
});

因此，在data: JSON.stringify部分中，我使用的是JSON字符串，但窗口小部件（时间轴）不起作用。它只有在我有一个工作URL时才有效。有没有办法使用静态JSON字符串而不必使用AJAX查询中的链接？其他一切都很好。此AJAX调用中使用的数据正在我的页面中的其他查询中使用，如下面的代码段所示（由于JSON链接的交叉起源，它不起作用）。

var BAND_TIMELINE = (function() {

    var filename = "snow-patrol.json",
        bandId = filename.replace(".json","");

    $.ajax({
        type: "GET",
        url: filename,
        dataType: "json",
        success: function(data){
            init(data);
        }
    });

    function init(data) {
        THE_BAND.displayBand(data);
        TIMELINE.displayTimescale(data);

        $(".bar").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 3000);
        });
    }

})();	


////
var THE_BAND = (function() {

    var presentYear = new Date().getFullYear();

    function displaydummy(dummy) {
        $('.band-name').text(dummy);
    }

    function displayBandDetails(data) {
        displaydummy(data.dummy);
        listrow(data);
    }

    function listrow(data) {
        var yearBandStarted = TIMELINE.getYearStarted(data),
            row = data.row,
            $rowList = $(".band-members"),
            barPosition = {};

        for (var member in row) {
            if (row.hasOwnProperty(member)) {
                var person = row[member],
                    yearsInBand = getYearsActive(person);

                $rowList.append('<li class="bar" id = "' + person.id + '">' + person.name +
                                        ' <em>(' + yearsInBand + ')</em></li>');

                barPosition = calculatePositionOnTimeline(person, yearBandStarted);

                if (barPosition.left) {
                    $('#' + person.id).css({left: barPosition.left + '%'});
                }
                $('#' + person.id).width(barPosition.width + '%');
            }
        }
    }

    function getYearsActive(person) {
        var yearsActive = "";

        if (!person.yearLeft) {
            yearsActive = person.yearJoined + " - present";
        } else {
            yearsActive = person.yearJoined + " - " + person.yearLeft;
        }

        return yearsActive;
    }

    function calculatePositionOnTimeline(person, yearBandStarted) {
        var yearsInBand = 1,
            widthPerYear = getWidthPerYear(yearBandStarted),
            barPosition = "",
            barProperties = { "left" : 0, "width" : 0};

        if (person.yearLeft) {
            yearsInBand += person.yearLeft - person.yearJoined;
        } else if (person.yearJoined < presentYear) {
            yearsInBand += presentYear - person.yearJoined;
        }

        barProperties.width = widthPerYear * yearsInBand;

        if (person.yearJoined > yearBandStarted) {
            var yearsFromStart = person.yearJoined - yearBandStarted;
            barProperties.left = (widthPerYear * yearsFromStart);
        }

        return barProperties;
    }

    function getWidthPerYear(yearBandStarted) {
        var present = new Date().getFullYear(),
            numberOfYears = (present - yearBandStarted) + 1,
            timelineWidth = $(".timeline").width(),
            widthPerYear = ((timelineWidth/numberOfYears)/timelineWidth)*100;

        return widthPerYear;
    }

    return {
        displayBand : displayBandDetails
    };

})();	

/////
var TIMELINE = (function() {

    function displayTimelineScale(data) {
        var $timelineScale = $(".years"),
            presentYear = new Date().getFullYear(),
            yearZero = getYearStartPoint(data),
            year = yearZero;

        while (year <= presentYear) {
            if (year === yearZero) {
                $timelineScale.append('<li class="start">' + trimYear(year.toString()) + '</li>');
            } else if (year === presentYear) {
                $timelineScale.append('<li class="present">' + trimYear(year.toString()) + '</li>');
            } else {
                $timelineScale.append("<li>" + trimYear(year.toString()) + "</li>");
            }
            year++;
        }

        // widths are set as percentages to allow for a flexible widths chart
        // NOTE: there is a limit to how flexible the width can be as more years = more space needed
        $('ul.years li').width(getWidthPerYear(yearZero) + '%');
    }

    function getYearStartPoint(data) {
        var row = data.row,
            startAtYear = row[0].yearJoined;

        for (var i = 0; i < row.length; i++) {
            for (var j = 1; j < row.length; j++) {
                var personA = row[i],
                    personB = row[j];

                if (personB.yearJoined < personA.yearJoined && personB.yearJoined < startAtYear) {
                    startAtYear = personB.yearJoined;
                } else if (personA.yearJoined < personB.yearJoined && personA.yearJoined < startAtYear) {
                    startAtYear = personA.yearJoined;
                }
            }
        }

        return startAtYear;
    }

    function getWidthPerYear(yearStarted) {
        var present = new Date().getFullYear(),
            numberOfYears = (present - yearStarted) + 1,
            borderPadding = numberOfYears,
            timelineWidth = $(".timeline").width(),
            widthPerYear = (((timelineWidth-borderPadding)/numberOfYears)/timelineWidth)*100;

        return widthPerYear;
    }

    function trimYear(yearStr) {
        var trimmedYear = "";

        if (yearStr.length === 4) {
            trimmedYear = "'" + yearStr.slice(2,4);
        } else if (yearStr.length === 3 && yearStr.startsWith("'")) {
            trimmedYear = yearStr;
        } else if (yearStr.length === 2) {
            trimmedYear = "'" + yearStr;
        }

        return trimmedYear;
    }

    return {
        displayTimescale : displayTimelineScale,
        getYearStarted : getYearStartPoint
    };
})();

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: 400;
    font: inherit;
    vertical-align: baseline;
}
strong {
    font-weight: bold;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* --- General style --- */


body {
    font: 400 1em/1.15 "Fira Sans Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fefefe;
    padding: 0 10px;
}
h1 {
    padding-top: 1.25%;
    padding-bottom: 1.5%;
    font: 400 1.5em/1 "Patua One", Georgia, "Times New Roman", serif;
    font-weight: bold;
    color: #333;
}
p {
    padding-top: 0.8%;
    padding-bottom: 0.8%;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

::selection {
    background: #ffb50d;
}
::-moz-selection {
    background: #ffb50d;
}

.description {
    clear: both;
    margin: 45px 0;
}

.band-name {
    background-color: #203e74;
    color: transparent;
    text-shadow: 0px 2px 5px rgba(255,255,255,0.6);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

/* --- Timeline Style --- */

.years {
    list-style-type: none;
    padding: 0;
    display: block;
}

.years li {
    font-size: 0.85em;
    border-right: 1px solid #fff;
    background: #f3f3f3;
    float: left;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}
.years.top li {
    border-bottom: 1px solid #000;
}
.years.bottom li {
    border-top: 1px solid #000;
}

.years .start {
    border-left: 1px solid #fff;
}
.years .present {
    border-right: none;
}

.band-members {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 15px 0;
    margin-left: -1px;
    height: 330px;
}

.band-members li {
    color: #f3f3f3;
    text-shadow: 0px 2px 3px #565656;
    border: 2px solid #ddd;
    position: relative;
    left: -2px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-box-shadow: 2px 2px 3px #696969;
    -webkit-box-shadow: 2px 2px 3px #696969;
    box-shadow: 2px 2px 3px #696969;
    margin-bottom: 5px;
    padding: 3px 0;
    text-align: center;
}

.band-members em {
    font-family: "Fira Sans Light Italic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-left: 0;
    display: inline-block;
}

#garyL {
    background: #f2374d;
    background: -webkit-linear-gradient(top, #cf061d, #f2374d);
    background:    -moz-linear-gradient(top, #cf061d, #f2374d);
    background:     -ms-linear-gradient(top, #cf061d, #f2374d);
    background:      -o-linear-gradient(top, #cf061d, #f2374d);
    background:         linear-gradient(to bottom, #cf061d, #f2374d);
}

#markM, #paulW {
    background: #fcbf17;
    background: -webkit-linear-gradient(top, #fcbf17, #fdd66a);
    background:    -moz-linear-gradient(top, #fcbf17, #fdd66a);
    background:     -ms-linear-gradient(top, #fcbf17, #fdd66a);
    background:      -o-linear-gradient(top, #fcbf17, #fdd66a);
    background:         linear-gradient(to bottom, #fcbf17, #fdd66a);
}

#michaelM, #jonnyQ {
    background: #6c9bde;
    background: -webkit-linear-gradient(top, #2779eb, #6c9bde);
    background:    -moz-linear-gradient(top, #2779eb, #6c9bde);
    background:     -ms-linear-gradient(top, #2779eb, #6c9bde);
    background:      -o-linear-gradient(top, #2779eb, #6c9bde);
    background:         linear-gradient(to bottom, #2779eb, #6c9bde);
}

#nathanC {
    background: #73b84d;
    background: -webkit-linear-gradient(top, #24a624, #73b84d);
    background:    -moz-linear-gradient(top, #24a624, #73b84d);
    background:     -ms-linear-gradient(top, #24a624, #73b84d);
    background:      -o-linear-gradient(top, #24a624, #73b84d);
    background:         linear-gradient(to bottom, #24a624, #73b84d);
}

#tomS {
    background: #7ba6ad;
    background: -webkit-linear-gradient(top, #4a95ab, #7ba6ad);
    background:    -moz-linear-gradient(top, #4a95ab, #7ba6ad);
    background:     -ms-linear-gradient(top, #4a95ab, #7ba6ad);
    background:      -o-linear-gradient(top, #4a95ab, #7ba6ad);
    background:         linear-gradient(to bottom, #4a95ab, #7ba6ad);
}

#johnnyM {
    background: #9c79bd;
    background: -webkit-linear-gradient(top, #8952bd, #9c79bd);
    background:    -moz-linear-gradient(top, #8952bd, #9c79bd);
    background:     -ms-linear-gradient(top, #8952bd, #9c79bd);
    background:      -o-linear-gradient(top, #8952bd, #9c79bd);
    background:         linear-gradient(to bottom, #8952bd, #9c79bd);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section class="bands">
    <div class="timeline">
        <ul class="years top"></ul>
        <ul class="band-members"></ul>
        <ul class="years bottom"></ul>
    </div>
</section>

Answer 1

为什么不将整个对象传递给init函数？

如果您打算使用静态JSON对象，则不需要AJAX。

init({"dummy" : "","yearStarted" : 1994, "row" : [{"id" : "garyL","name" : "One","yearJoined" : 2007,"yearLeft" : 2015},{"id" : "markM","name" : "Two","yearJoined" : 2001,"yearLeft" : 2005}]});

在AJAX查询中使用静态JSON字符串而不是URL

1 个答案: