如何使用Ipc Main与Ipc Render发送完整表单？

刚好之前做过类似的需求，结合你已经掌握的IPC通信基础，给你补全完整的实现步骤，轻松搞定表单数据的传输：

第一步：给表单添加唯一ID #

首先得给你的HTML表单加个ID，这样能精准定位到它：

<form id="userInfoForm">
  <input type="text" name="username" placeholder="输入用户名">
  <input type="email" name="email" placeholder="输入邮箱">
  <input type="password" name="password" placeholder="输入密码">
  <button type="button" id="submitForm">提交表单</button>
</form>

第二步：渲染进程序列化并发送表单数据 #

在渲染进程（前端页面）里，用jQuery的序列化方法把整个表单数据转成易传输的格式，再通过ipcRenderer发送到主进程：

// 渲染进程代码
const { ipcRenderer } = require("electron");
const $ = require("jquery"); // 记得先执行 `npm install jquery` 安装依赖

// 绑定提交按钮的点击事件
$("#submitForm").click(() => {
  // 两种序列化方式任你选：
  // 方式1：转成URL编码的字符串，格式示例："username=张三&email=zhangsan@xx.com"
  const formDataString = $("#userInfoForm").serialize();
  // 方式2：转成对象数组，方便后续转成JSON对象，格式示例：[{name: "username", value: "张三"}, ...]
  // const formDataArray = $("#userInfoForm").serializeArray();

  // 把序列化后的表单数据发送到主进程
  ipcRenderer.send("the-form", formDataString);
});

第三步：主进程接收并处理数据 #

主进程的接收逻辑和你原来写的差不多，拿到数据后可以直接打印或者做后续业务处理：

// 主进程代码
const { ipcMain } = require("electron");

ipcMain.on('the-form', function(event, theData) {
  console.log("收到的表单数据：", theData);
  
  // 如果用的是数组格式，这里可以转成更易操作的JSON对象：
  // const formDataObj = {};
  // theData.forEach(item => {
  //   formDataObj[item.name] = item.value;
  // });
  // console.log("格式化后的表单对象：", formDataObj);
});

小提示 #

如果不想依赖jQuery，也可以手动遍历表单的elements属性收集数据，但jQuery的序列化方法已经帮我们处理了各种表单元素的兼容问题（比如复选框、下拉框、单选框这些），用起来省心很多～

内容的提问来源于stack exchange，提问作者Ryan Hinchliffe