不能 output 多行字符串到 HTML

Question

這是我的代碼：

$( document ).ready(function() {

    $.getJSON('onlineinsurance/services/aggregateRating.php', { rating: false } , function(result) {
        $("#rating-value").text(result['avg_rating']);
        $("#rating-count").text(result['count']);
        schema_org = ` <script type="application/ld+json">
        {
            "@context": "http://schema.org/",
            "@type": "Product",
            "name": "Some name",
            "image": "some image path",
            "description": "some description",
            "brand": "some brand name",
            "offers": {
            "@type": "AggregateOffer",
            "priceCurrency": "BGN",
            "lowPrice": "176.93",
            "offerCount": 10
            },
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "'` + result['avg_rating'] + `'",
                "reviewCount": "'` + result['count'] + `'"
            }
        }
    </script>
    `;
        $("#schema-org").after(schema_org);
    });
}); 

和 HTML：

<p id="schema-org"></p> 

我無法處理問題出在哪里，如果我更改此行：

$("#schema-org").after(schema_org);

至

$("#schema-org").after('test');

例如，它工作得很好，所以我認為乘行字符串是問題所在？ 我錯了嗎？

編輯：好的..主要問題在我身上，當我用 cntrl + u 觀察時，字符串沒有出現，但是當我用 f12 檢查時它就在那里！

Answer 1

您能否只創建一個<SCRIPT> jQuery 元素並設置文本值？

此外，由於它是 JSON，因此您可以根據需要將其序列化為字符串。

此外，您可以跳過串聯並在模板文字中使用占位符。 例如${result['avg_rating']}

 JSON.stringify(jsonObj, null, 2);

 let result = {}; // Avoid error below... let schema_org = `{ "@context": "http://schema.org/", "@type": "Product", "name": "Some name", "image": "some image path", "description": "some description", "brand": "some brand name", "offers": { "@type": "AggregateOffer", "priceCurrency": "BGN", "lowPrice": "176.93", "offerCount": 10 }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "'${result['avg_rating']}'", "reviewCount": "'${result['count']}'" } }`; $("#schema-org").after($('<script>').attr('type', 'application/ld+json').text(schema_org));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="schema-org"></div>

Answer 2

你可以嘗試用這個替換你的 schema_org 值嗎？

` <script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": "Some name",
        "image": "some image path",
        "description": "some description",
        "brand": "some brand name",
        "offers": {
        "@type": "AggregateOffer",
        "priceCurrency": "BGN",
        "lowPrice": "176.93",
        "offerCount": 10
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "'${result['avg_rating']}'",
            "reviewCount": "'${result['count']}'"
        }
    }
<\/script>
`;

並嘗試。 我認為問題在於您的腳本被正確拾取

Answer 3

您的結束腳本標記正在破壞字符串，為此使用轉義字符將使其正常工作。

因此，這與多行字符串無關。

這是一個例子

$( document ).ready(function() {
var schema_org = ` <script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": "Some name",
        "image": "some image path",
        "description": "some description",
        "brand": "some brand name",
        "offers": {
        "@type": "AggregateOffer",
        "priceCurrency": "BGN",
        "lowPrice": "176.93",
        "offerCount": 10
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "avg_rating",
            "reviewCount": "count"
        }
    }
<\/script>
`;
    $("#schema-org").after(schema_org);
});