如何在单击第一个按钮时发送带有两个HTML按钮的表单而不重新加载页面？

Question

[您好，我刚开始是编程世界，我正在用Python Flask开发Web应用程序，但是现在我遇到了一个问题，我认为它是Javascript的客户端。但是我没有使用过Javascript。

这是我正在工作的界面。This is my interface

我有一个页面，我需要客户端上传csv文件，当客户端上传一个或多个文件时，我会自动在页面上显示文件，并且在每个文件中都放置了一个Select Option，因为我需要客户端选择Seeccion属于每个文件，上传了。 （我有一个预先定义的清单）。

以客户上传文件的形式，我有两个按钮，每个按钮执行相同的Python函数（使用IF和ELIF循环确定每个按钮必须执行的任务。]

一旦上传文件，客户端必须选择每个文件所属的目录，然后客户端必须单击FIRST按钮（保存）以将它们在每个文件中选择的文件保存在一起，但不重新加载页面（这是问题，第一个按钮会重新加载所有页面，并重新启动每个文件中的所有“选定选项”值），这是我不想要的，因为我需要使用相同的数据来执行SECOND按钮（关闭）以执行一些操作SQLite查询..

我希望有人可以给我一些想法，我该如何使用Javascript解决这个问题，我是使用此工具的新手...

任何帮助将不胜感激！

HTML：

<div class="row">
 <form action="/carga/cerrar" method="POST">
 <div class="row">
  <div class="col s12">
    <table class="responsive-table highlight">
      <thead>
        <tr>
          <th data-field="nombre">Filename</th>
          <th data-field="modulo">Módulo</th>
          <th data-field="layout">Layout</th>
        </tr>
      </thead>
      <tbody>
        {% for archivo in archivos %}
        <tr>
          <td>{{ archivo['archivo'] }}</td>
          <td>
            <div class="input-field">
              <select name="modulos-{{ archivo['id'] }}" id="modulos-{{ archivo['id'] }}">
                <option value="" disabled selected>Chose módulo</option>
                {% for modulo in modulos %}
                <option value="{{ modulo['id'] }}">{{ modulo['nombre'] }}</option>
                {% endfor %}
              </select>
              <label>Materialize Select</label>
            </div>
          </td>
          <td>
            <div class="input-field">
              <select name="layouts-{{ archivo['id'] }}" id="layouts-{{ archivo['id'] }}">
                <option value="" disabled selected>Chose el layout</option>
              </select>
              <label>Materialize Select</label>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!--Here are the buttons -->

<div class="row center">
  <div class="col l3 m3 offset-l3 offset-m3 s6">
    <button class="btn waves-effect waves-light" type="submit" name="guardar" id="guardar">Save
      <i class="material-icons right">send</i>
    </button>
  </div>
  <div class="col l3 m3 s6">
    <button class="btn waves-effect waves-light" type="submit" name="cerrar" id="cerrar">Close
      <i class="material-icons right">send</i>
    </button>
  </div>

 </div>
</form>
</div>

Answer 1

要阻止表单重新加载您的按钮之一，您可以添加：

onclick="event.preventDefault()"

要在不重新加载表单的情况下将数据发布到服务器，您可以在javascript中使用ajax。如果不需要支持IE11，则可以使用函数fetch（），它非常简单。即使您需要支持IE11，也可以添加polyfill以支持抓取。

要使用提取：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch