Electron - 获取表单数据

Posted

技术标签:

【中文标题】Electron - 获取表单数据【英文标题】:Electron - get form data 【发布时间】:2018-04-24 22:49:14 【问题描述】:

我是 Electron 新手,想知道如何将数据从表单获取到 main.js(启动 Electron 的主文件)。我的 index.html 文件中的 sn-p 如下:

    <form id="creds">
       <h3 class="username">Username</h3>
        <input id="username" class="form-control text-input" placeholder="Username">
        <input type="submit" value="Submit">
    </form>

我阅读了有关 ipcMain 和 ipcRenderer 的信息,但在点击提交按钮后,我无法弄清楚使用什么代码从 index.html 中获取数据

【问题讨论】:

【参考方案1】:

我最终使用了 ipcMain 和 ipcRenderer 方法。在 index.html 中

<script>
   document.querySelector('#submit').addEventListener('click', function() 

    let username = document.getElementById("username").value;

    const ipcRenderer = require('electron')

    // send username to main.js 
    ipcRenderer.send('asynchronous-message', username )

    // receive message from main.js
    ipcRenderer.on('asynchronous-reply', (event, arg) => 
      console.log(arg) 

    )

    );
</script>

在 main.js 中

const ipcMain = require('electron')

// receive message from index.html 
ipcMain.on('asynchronous-message', (event, arg) => 
  console.log( arg );
  
  // send message to index.html
  event.sender.send('asynchronous-reply', 'hello' );
  );

【讨论】:

以上是关于Electron - 获取表单数据的主要内容,如果未能解决你的问题,请参考以下文章

使用 ipc 渲染器从 mongodb 和 electron js 获取数据

#yyds干货盘点# Electron常见问题 48 - Electron 获取本机 MAC 地址

Electron常见问题 48 - Electron 获取本机 MAC 地址

如何从 Electron-builder NSIS 获取选定的语言

从 Electron 应用程序发出多部分 POST 请求以进行文件上传

Electron伪协议参数获取