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

Question

我在一个项目上有一些 javascript fetch()，虽然它可以工作，但我遇到的问题是，(虽然我了解 fetch 和 formData), 这段代码看起来过于复杂了，我不明白它是如何工作的？

我有一些 PHP，当单击下载按钮时，它会更新 MySQL 数据库中的“下载”计数。我在最后包含了 PHP，但它与问题并不相关。

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

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

我对我不理解的部分添加了代码注释。

另外，请随意解释这一点，就好像你在和一个白痴说话一样——我是 JavaScript/软件开发的新手。

注意:使用 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

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

1. 自动将表单处理程序添加到每个 <form>有类 .download-form-js
2. 向 POST 请求添加有关哪个按钮实际提交了表单的信息。

您的大部分问题都与它试图实现目标 2 的奇怪方式有关。 Peterrabbit 很好地逐一完成了这些，所以我不会再这样做了。幸运的是，有一种更简单的方法可以做到这一点——利用 submitter FormEvent 的属性(property)(参见 docs)。查看下面的重构代码，它也在 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我有这个重构的实现与你的原始实现并排运行，以及与如果你完全摆脱 javascript 并只使用一个简单的 <form action="FORM_HANLDER_URL" method="post"> 会发生什么的比较。 .我还尝试在 src/original.js 中回复您的评论文件。