logo标签列表

使用JavaScript在GitHub Pages上写入文件

javascriptjsongithubgithub-pagesfile-writing
8

有没有办法使用JavaScript在GitHub页面上写入文件？ 我想将要在其他地方使用的一些信息保存到JSON文件中（最好是，但txt也可以），想知道是否可能。

1个回答
0

逐步指南

如果你不是JavaScript专家，那么你可能想要按照我们的逐步指南进行操作。

嵌入式JavaScript

在第一个示例中，我们创建了一个名为js.md的Markdown文件。在该Markdown文件中，我们放置了一个带有id“text”的HTML div元素。稍后在该文件中，我们添加了一个脚本标签，并在其中编写了一些简单的JavaScript代码。此代码将定位具有id“text”的元素或div元素，并在元素内部放置出现在赋值右侧的文本。

这里需要记住的主要事项是JavaScript代码必须放在最后，以便在执行时DOM已准备就绪。否则，JavaScript代码将无法找到HTML元素。

examples/github/js.md

<div id="text"></div>
 
<script>
document.getElementById("text").innerHTML = "Text added by JavaScript code";
</script>

从外部文件加载jQuery

我们的下一步是使用jQuery而不是普通JavaScript。为此，我们只需要从其CDN加载jQuery即可。如果我们已经在加载外部JavaScript文件，则可以将我们的代码移动到外部文件中。因此，我创建了demo.js文件，并使用另一个脚本标记加载它。

这次，我们可以将脚本标记放在任何位置，因为当DOM准备就绪时，jQuery回调函数将仅执行一次。唯一的限制是我们需要在加载jQuery本身之后加载我们的代码。

examples/github/jquery.md

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/demo.js"></script>
 
<div id="text"></div>

在我们的jQuery代码中，我们有一个匿名回调函数，当HTML加载完成并且DOM准备就绪时会被调用。这就是$().ready所做的。在函数内部，我们使用$("#text")表达式来定位具有id"text"的元素，然后我们使用html方法来设置元素的内容（与vanilla JavaScript中的innerHTML相同）。

examples/github/demo.js

$().ready(function() {
   $("#text").html("Text added by jQuery code.");
});

从服务器加载JSON数据

最后，我们想要从服务器获取一些数据。由于我们无法在服务器上运行任何内容，因此无法获取动态数据，但是可以将数据存储在JSON文件中，并使用jQuery提供的Ajax方法加载它们。

在此示例中，标记文件与我们先前的示例基本相同。

examples/github/json.md

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/json.js"></script>
 
<div id="text"></div>

在jQuery代码中，我们使用getJSON方法从服务器获取data.json文件。这意味着首先将加载从Markdown文件生成的HTML文件。然后浏览器将加载jQuery，然后是我们的代码。然后，一旦一切准备就绪，我们的代码将运行并从服务器加载JSON文件。
getJSON的第一个参数是我们想要加载的JSON文件的URL。第二个参数是一个匿名回调函数，当我们从服务器获得响应时将执行该函数。然后，jQuery将调用我们的匿名函数，并在将JSON文件内容转换为JavaScript对象后传递它。
console.log(data);仅用于调试。
在最后的JQuery代码中，在$("#text").html(data["text"]);中，第一部分$("#text")将定位具有id“text”的元素。html方法将将元素的内容设置为我们传递给它的值，即data["text"]，从JSON文件中到达的“text”键的值。

examples/github/json.js

$().ready(function(){
    $.getJSON( "/data.json", function( data ) {
    console.log(data);
    $("#text").html(data["text"]);
  });
});

这是 data.json 文件

examples/github/data.json

{
   "text" : "Text supplied in the JSON file"
}

希望这有所帮助！
2
无法理解你的回答与“写入github页面文件”有何关系。 - Ron Burk
这并不实际编辑文件。 - Spiceinajar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接