提交带有其他选项的表格？

Question

例如，我有一个用于编辑用户数据的页面。页面顶部是一个决定，它是否来自它自己的提交。如果提交则保存数据并关闭页面。如果不是，则输入字段可见。

但我希望能够在更改某些数据时重新加载页面（例如，偶尔出现下拉菜单）。因为当这个下拉菜单被更改时，其他数据也应该被更改或禁用等。因此我需要用它的 POST 数据重新加载页面但不保存数据。但是当我使用 submit() 时，它将被保存并关闭。

有没有一种方法可以发送带有 POST 数据的表单，但能够决定是最终保存数据还是应该使用 POST 数据更新表单？

谢谢！马库斯

Answer 1

A page reload isn't the best user experience when an options changes and you need to hide or show details on the page.如果可以的话，我建议将该逻辑完全放在前端。如果您需要基于仅存在于服务器上的答案的其他数据，则使用对后端的 GET 调用并使用结果填充前端。

没有进一步的细节，我只能创建这个小片段来让您了解如何执行此操作。注释在代码中。

$('document').ready(function() {
  $('#state').change(function() {

    // NOTE: code only used to show a visual change. Add logic into the .get call success function. Here, read the state and set the input to enabled or disabled depending on what is returned from the server.
    var state = this.value;
    $("#name").prop('disabled', state === "0" ? 'disabled' : '');

    // Make the server call, use GET as you are getting information.
    // The variable provided to the backend is state with value 0 or 1, (?state=0) 
    $.get("https://yourserver/?state=" + state, function(data) {

      // when the call is successful, use the data object to determine what should be done. 
      var state = data.state;
      $("#name").prop('disabled', state === "0" ? 'disabled' : '');
    });
  });

});

input:disabled {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select id="state">
    <option value="1">Enabled</option>
    <option value="0">Disabled</option>
  </select>
  <p><input type="text" id="name" placeholder="Your name"></p>
  <div class="result"></div>
</form>

提交带有其他选项的表格？

submit form with additional options?

javascript

forms

post

submit

reload