在 .submit() 和 fetch(method: 'POST') 之后使用 GET 请求刷新页面

编程问答 2022-05-22

问题描述

我一直在尝试创建一个带有多个提交按钮的表单，但失败了。我研究并阅读了很多很多文章，感觉自己已经接近了，但我遇到了一个障碍。我已经尽可能地简化了我的代码，但显然它是一个更大的代码库的一部分。我有一个 HTML 页面，它从 Javascript 文件创建一个新类。该类使用一个 PHP 文件来

  1. 创建表单
  2. 处理表单的结果。

Javascript 还添加了各种事件。

我遇到的问题是，在 fetch 处理使用 POST 方法的结果之后，另一个 GET 方法（参数作为 URL 的一部分）刷新页面。 我尝试了各种修复，其中一些是：

  1. 添加 event.preventDefault();（并移动它的位置）
  2. 添加 return false;（并移动它的位置）。
  3. 将按钮移出表单。 （有人说这会导致第二次提交）。
  4. 向表单和其他值添加空白操作（当前为 #）

我的 HTML 代码是。

    <div class="scratch_container"> </div>
    <script src="scratch.js"></script>
    <script>
    new Scratch();
    </script>

我的 Javascript 是。

class Scratch {

    constructor(options) {
        let defaults = {
          container: document.querySelector(".scratch_container"),PHP_file_url: "scratch.PHP"
        };
        this.options = Object.assign(defaults,options);
        this.initialise();
    }

    initialise() {
        let url = `${this.options.PHP_file_url}?process_type=A`;
        fetch(url).then(response => response.text()).then(data => {
          this.options.container.innerHTML = data;
          this._eventHandlers();
        });
    }

    _eventHandlers() {
      this.options.container.querySelectorAll(".scratch_main .action").forEach(action => {
        action.onclick = event => {
          this.options.container.querySelector(".scratch_main form").submit();
          fetch(`${this.options.PHP_file_url}?process_type=C`,{
                method: 'POST',body: new FormData(this.options.container.querySelector(".scratch_main form"))
          }).then(response => response.json()).then(data => {
              this.options.container.querySelector(".scratch_main .message").innerHTML = data.text;
          }).catch(function (error) {
              console.log(error)
          });;
          event.preventDefault();
          return false;
        };
      });
    }

}

最后是 PHP。

<?PHP
switch ($_GET['process_type']) {
case "C":
      $output = json_encode(array('type'=>'success','text' =>
        'Form Data<br />' .
        'input_1  ' . $_POST['input_1'] . '<br />' .
        'input_2  ' . $_POST['input_2'] . '<br />' .
        'action  ' . $_POST['action']));
      die($output);
      break;
case "A":
?>
  <div class="scratch_main">
    <div class="message"> </div>
    <form action="#">
        <input name="input_1" value="input 1" type="text">
        <input name="input_2" value="input 2" type="text">
        <button type="reset" value="Reset">Reset</button>
    </form>
    <button class="action" name="action" value="submit">Submit</button>
    <button class="action" name="action" value="cancel">Cancel</button>
  </div>
  <?PHP
  break;
default:
  $output = json_encode(array('type'=>'error','text' =>  'No switch code!'));
  die($output);
}
?>

我知道有很多线程，甚至在 stackoverflow 上讨论这个问题，我想我已经阅读了每个人并尝试实施对他们有用的修复程序，但我仍然得到相同的结果。

我使用 PHP 7.4 在带有 ionos 的托管服务器上运行它。第一个 html 正在作为 PHP 运行。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fetchfetchfetchgetjavascriptpostpost