分步指南

Question

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

Answer 1

分步指南

如果您不太熟悉 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 文件，使用另一个脚本标签加载它。

这次我们可以把脚本标签放在我们喜欢的任何地方，因为 jQuery 回调函数只会在 DOM 准备好时才会执行。唯一的限制是我们需要在加载 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 将调用我们的匿名函数，并将其转换为 JavaScript 对象后传递 JSON 文件的内容。

console.log(数据);添加只是为了调试。

在最后的 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"
}

希望这有帮助！

使用javascript在github页面上写入文件

1 个答案:

分步指南

嵌入式 JavaScript

从服务器加载 JSON 数据

在此示例中，标记文件实际上与我们之前的示例中的相同。