保存 Javascript 函数的输出答案

【问题标题】：Save output of a Javascript function保存 Javascript 函数的输出
【发布时间】：2021-08-06 19:05:57
【问题描述】：

我有一个 Rails 6 应用程序，我正在与浏览器交互以从 Chrome 扩展程序获取一些信息 (getAccount)。

在最后一行，我输入了console.log(account)，它会打印出正确的值。但是，我想将帐户变量保存到我的数据库中。我将如何将 account 变量暴露给 Rails，以便将其发送到控制器并保存？

<%= link_to "Home", root_path %>

<button class="enableEthereumButton">Connect MetaMask</button>
<h2>Account: <span class="showAccount"></span></h2>

<script>
  const ethereumButton = document.querySelector('.enableEthereumButton');
  const showAccount = document.querySelector('.showAccount');

  ethereumButton.addEventListener('click', () => {
    getAccount();
  });

  async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    showAccount.innerHTML = account;
    console.log(account)
  }

</script>

【问题讨论】：

您的意思是告诉您的服务器有关客户端的某些内容？通过例如向您的服务器发出 HTTP 请求？
理想情况下将account 的值传递给Rails 控制器。
Fetch/Ajax 或传统表单发布。您必须将数据返回到服务器。

标签： javascript ruby-on-rails

【解决方案1】：

由于 Rails 在服务器上运行，而此代码在浏览器中运行，因此您需要将该数据传输到后端。

最简单的方法是向服务器上的路由发出 HTTP POST 请求，该路由可以直接将帐户记录到数据库或对其执行任何其他操作。

您还可以在客户端和服务器之间建立 WebSocket 连接并以这种方式交换信息，但您真正需要的只是一个简单的 HTTP POST 请求。

【讨论】：

这是一个非常有用的解释。谢谢你。您介意在上面示例中的 console.log 之后显示示例代码 sn-p 吗？我不确定如何在 JS 函数中进行 HTTP POST。
您可以在 Google 上轻松找到很好的指南/教程/示例。使用fetch、XMLHttpRequest 或许多基于它们的库。

【解决方案2】：

根据 Kelvin 的指导，我最终得到了以下解决方案：

<script>
  const ethereumButton = document.querySelector('.enableEthereumButton');
  const showAccount = document.querySelector('.showAccount');

  ethereumButton.addEventListener('click', () => {
    getAccount();
  });

  async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    showAccount.innerHTML = account;
    console.log(account)

    const response = await fetch('http://localhost:3000/save_eth_address', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      eth_address: account,
    })
  });

  }

</script>

它将参数发送到控制器，我可以轻松找到并保存到数据库。

【讨论】：