如何使用Ajax动态更新JSON-LD脚本？

Question

我有JSON-LD，如ratingValue和ratingCount来自后端，但我想通过Ajax调用从UI进行，并在aggregateRating中更新它。

但是当打开页面源时，它显示来自后端的数据，但是当我执行console.log()时，它显示了预期的值，但它没有在页面源中更新。

有什么方法可以从UI端进行吗？

<script type="application/ld+json"> {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Phone",

    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "ratingCount": "80"
    },
    "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "5",
        "highPrice": "10",
        "priceCurrency": "USD",
        "availability": "http://schema.org/InStock"
    }
}
</script>

(function () {
    var id = $ {
        prdId
    };
    var response = "";
    $.ajax({
        url: url;
        dataType: "jsonp",
        data: {
            pid: id,
            _method: "GET",
            t: new Date().getTime()
        },
        timeout: 20000,
        xhrFields: {
            withCredentials: true
        },
        type: "get",
        success: function (json) {
            if (json.success == true) {
                response = json.data;
                //call api
                structureData(response);
            } else {
                response = "error";
            }

        }
    });


    function structureData(resp) {
        var json = document.querySelector('script[type="application/ld+json"]').textContent;
        json = JSON.parse(json);

        json["aggregateRating"] = {
            "@type": "AggregateRating",
            "ratingValue": resp.averageScore,
            "reviewCount": resp.averageScore
        }
        var jso = JSON.stringify(json);

        document.querySelector('script[type="application/ld+json"]').textContent = jso;

    }
}