Javascript 和 JQuery 简洁表单提交

Question

我对 JavaScript 和 jQuery 非常陌生，试图找到一种不太冗长的方式来向 Electron 提交表单，JSON 格式很好，它可以在服务器端处理。您将如何重写此代码以使其更加简洁？

<section>
  <input id="server"        type="text"     placeholder="Server">
  <input id="instanceName"  type="text"     placeholder="Instance Name">
  <input id="linkedServer"  type="text"     placeholder="Linked Server">
  <input id="histDatabase"  type="text"     placeholder="Historical Database">
  <input id="modelDatabase" type="text"     placeholder="Model Database">
  <input id="schema"        type="text"     placeholder="Schema">
  <input id="username"      type="text"     placeholder="Username">
  <input id="password"      type="password" placeholder="Password">
  <input id="clientCode"    type="text"     placeholder="Client Code">
<footer>
  <button class="submit">Create Account</button>
</footer>

$("#modal-custom").on('click', '.submit', function(event) {
    let server        = document.getElementById('server').value;
    let instanceName  = document.getElementById('instanceName').value;
    let histDatabase  = document.getElementById('histDatabase').value;
    let linkedServer  = document.getElementById('linkedServer').value;
    let modelDatabase = document.getElementById('modelDatabase').value;
    let schema        = document.getElementById('schema').value;
    let username      = document.getElementById('username').value;
    let password      = document.getElementById('password').value;
    let clientCode    = document.getElementById('clientCode').value;
    ipcRenderer.send('update:databaseDetails', server, instanceName, 
    linkedServer, histDatabase, modelDatabase,schema, username, 
    password, clientCode)
});

Answer 1

在标签中您可以指定方法和操作。

方法:指定如何发送表单数据-->“GET”或“POST”。

action:指定处理此数据的 URL 路由。

    <form action="/formsubmit" method="POST">
      <input id="server"        type="text"     name="server">
      <input id="instanceName"  type="text"     name="instance">
      <input id="linkedServer"  type="text"     name="linked">
    </form>

服务器端您将收到 JSON 数据形式的用户输入，所有输入值都填充在 request.body 中；

使用标签的“名称”作为键，用户输入作为值:

{
    server: <user's input>,
    instance: <user's input>,
    linked: <user's input>,
}

您可以在此处阅读有关 HTML 表单的更多信息:https://www.w3schools.com/tags/att_form_method.asp