使用 JavaScript Fetch() 和 formData() 更新数据库

Question

我在一个项目上有一些 javascript fetch()，虽然它有效，但我遇到的问题是，（虽然我了解 fetch 和 [=16= 的基础知识]), 这段代码看起来过于复杂了，我不明白它是如何工作的？

我有一些 PHP 当单击下载按钮时它会更新 MySQL 数据库中的 'downloads' 计数。我在最后添加了 PHP，但它与问题无关。

我不明白的是，如果将表单按钮分配给 downloadButton 变量，为什么代码要这样写，特别是在 click 事件监听器上？

如果有人能向我解释这一点并可能展示使用 downloadButton 变量的更好方法，那就太棒了？

我对不明白的部分添加了代码注释。

也请随意解释，就好像你在和白痴说话一样 - 我是 JavaScript/software 开发的新手。

注意： 使用 JSON / URL 端点不是一个选项。

JavaScript

let forms = document.querySelectorAll('.download-form-js'),
    downloadButton = document.querySelectorAll('.dl-button')

// URL details
let myURL = new URL(window.location.href), // get URL
pagePath = myURL.pathname // add pathname to get full URL

if (forms) {
        forms.forEach(item => {
            
            // Why is it done like this when a variable is assigned to the download button above?
            item.querySelectorAll('[type="submit"], button').forEach( button => {
                button.addEventListener("click", e => item._button = button); //store this button in the form element?
            })

            // The 'btn' parameter in this function isn't used ?
            item.addEventListener("submit", function(evt, btn) {

                evt.preventDefault();

                const formData = new FormData(this);

                // Can the parameters inside the '.set()' function not be done with the 'downloadButton' variable?
                if (this._button) // submitted by a button?
                {
                    formData.set(this._button.name, this._button.value);
                    delete this._button; // have no idea why this is even used?
                }

            fetch (pagePath, {
                method: 'post',
                body: formData
            }).then(function(response){
                return response.text();
            // }).then(function(data){
            //     console.log(data);
            }).catch(function (error){
                console.error(error);
            })

        })

    })

} // end of if (forms)

HTML 此表单在任何页面上至少出现两次。

<section>
    <div class="image-wrapper">
        <img src="image.jpg" alt="image">
    </div>
    <form class="download-form-js" enctype="multipart/form-data" method="post">
        <div class="dl-button-wrapper">
                <label for="download-button">Download</label>
                <button id="download-button" type="submit" name="download" title="Download" value="12" class="dl-button"></button>
            <input type="hidden" name="image-id" value="12">
        </div>
    </form>
</section>

PHP（不是很相关，但我想我会包括它）

下面是用于更新下载计数的 PHP 函数，但实际上与上述问题无关。

function downloadCounter($connection, $imageID) {
    if (isset($_POST['download'])) {
         // value from hidden form element
         $imageID = $_POST['image-id'];

         try {
              $sql = "UPDATE lj_imageposts SET downloads = downloads +1 WHERE image_id = :image_id";
              $stmt = $connection->prepare($sql);

              $stmt->execute([
                   ':image_id' => $imageID
              ]);

         } catch (PDOException $e) {
              echo "Error: " . $e->getMessage();
         }
    }
}

Answer 1

forms.forEach(item => {
    // Why is it done like this when a variable is assigned to the download button above?
    item.querySelectorAll('[type="submit"], button').forEach(button => {

因为变量 downloadButton 是页面中所有下载按钮的集合，但是 item.querySelectorAll('[type="submit"], button') 只接受嵌套在正在迭代的表单中的按钮。

      button.addEventListener("click", e => item._button = button); //store this button in the form element?
    })

按钮 HtmlElement 的引用存储为表单 HtmlElement 的属性。

    // The 'btn' parameter in this function isn't used ?
    item.addEventListener("submit", function(evt, btn) {

无法使用 btn 参数，如文档中所述 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback eventListener 回调仅支持 event 作为参数。所以这个 btn 在所有情况下都只是 undefined。

      // Can the parameters inside the '.set()' function not be done with the 'downloadButton' variable?
      if (this._button) // submitted by a button?
      {
        formData.set(this._button.name, this._button.value);
        delete this._button; // have no idea why this is even used?
      }

与上面的答案相同，如果使用变量downloadButtons，按钮将不会与表单相关。（实际上是可以的，但需要更多的操作来识别父表单）

如果我的逻辑很好，存在 _button 属性的事实意味着已单击提交按钮，并且在该属性 _button 中引用了相同的按钮。所以我们可以用它的 name 和 value.

得到我们想要的值

然后 _button 属性被删除，因为如果在同一个表单中单击另一个按钮，它将替换这个按钮（即使在那种精确的情况下删除该属性是无用的，它可以重新分配） .但是也许也可以在不单击任何这些按钮的情况下提交表单（？），这将解释 if this._button...

我再次认为这个实现非常扭曲。但是我不知道这个实现的所有细节，所以我不知道我是否可以提出一个更相关的方法来实现它..

Answer 2

在高层次上，我认为这段代码试图实现以下行为（尽管以一种非常奇怪的方式）

自动将表单处理程序添加到具有 class .download-form-js

<form>

向 POST 请求添加有关实际提交表单的按钮的信息。

你的大部分问题都与它试图实现目标 2 的奇怪方式有关。 Peterrabbit 很好地完成了这些 one-by-one，所以我不会再这样做了。幸运的是，有一种更简单的方法可以做到这一点——利用 FormEvent 的 submitter 属性（参见 docs). Check out the refactored code below, which is also in this codesandbox:

const forms = document.querySelectorAll(".download-form-js");
forms.forEach((form) => {
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    // see: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
    if (e.submitter) {
      formData.set(e.submitter.name, e.submitter.value);
    }

    fetch(pagePath, {
      method: "post",
      body: formData
    })
      .then(response => console.log(response))
      .catch((e) => console.error(e));
  });
});

这基本上不需要在表单中的每个按钮上注册事件处理程序（其唯一目的是在单击时在表单对象上注册自己，以便表单“提交”事件可以确定单击了哪个按钮，并添加到 POST 请求）。

在链接的 codesandbox I have this refactored implementation running side-by-side with your original implementation, as well as a comparison with what would happen if you got rid of javascript altogether and just used a simple <form action="FORM_HANLDER_URL" method="post">. I also tried to respond to your comments inline in the src/original.js 文件中。

使用 JavaScript Fetch() 和 formData() 更新数据库

Using JavaScript Fetch() and formData() To Update A Database

html

javascript

ajax

form-data

fetch