javascript - 如何更新 HTML 脚本标记中嵌入的数据？

Question

我有一个简单的 html 页面，脚本标记中嵌入了 Json-ld 数据。

如何在提交表单时更新此数据？

这是页面的一些代码(数据+加载函数)。我缺少的是 saveData 函数，它更新脚本部分中嵌入的数据。

谢谢，

    <script id="person" type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "givenName": "Marco",
  "familyName": "Van Basten"
}
</script>
<script>
function loadData() {

  var person = document.getElementById("person").textContent;
  var jsonld = JSON.parse(person);


  document.getElementById("givenName").value = jsonld.givenName;
  document.getElementById("familyName").value = jsonld.familyName;

}

Answer 1

以下代码片段仅作为示例，但应该向您展示如何使用 JSON.stringify 使用 JSON 字符串更新脚本对象。

  person.innerHTML = JSON.stringify(jsonld);

使用“加载”加载原件。更改值，然后再次保存并加载。 使用浏览器开发者工具观察 DOM 的值。

function loadData(e) {

  var person = document.getElementById("person");
  var jsonld = JSON.parse(person.textContent);
  console.log(jsonld.givenName, jsonld);

  document.getElementById("givenName").value = jsonld.givenName;
  document.getElementById("familyName").value = jsonld.familyName;

}

function saveData(e) {
  console.log('event', e);
  var person = document.getElementById("person");
  var jsonld = JSON.parse(person.textContent);
  
  jsonld.givenName =document.getElementById("givenName").value;
  jsonld.familyName =document.getElementById("familyName").value;
  
  //person.innerHTML = JSON.stringify(jsonld);
  person.textContent = JSON.stringify(jsonld);
}

document.getElementById("saveButton").addEventListener('click', saveData);
document.getElementById("loadButton").addEventListener('click',loadData);

<script id="person" type="application/ld+json">
  { "@context": "http://schema.org", "@type": "Person", "givenName": "Marco", "familyName": "Van Basten" }
</script>
<form>
  <input type="text" id="givenName" />
  <input type="text" id="familyName" />
</form>
<button id="loadButton">Load</button>
<button id="saveButton">Save</button>