javascript - 在 AJAX 中将数据与 FormData 作为一个对象一起发送

Question

我正在尝试将 JSON 数组内的 FormData 传递给 AJAX 脚本:

$('#form').submit(function(e)
{
    e.preventDefault();

    let formData = new FormData(this),
        data = {'action': 'insert', 'data': formData};

    $.ajax({
        data: data,
        url: '/wp-content/plugins/eng-dealer-map/bin/Admin.php',
        type: 'post',
        cache: false,
        contentType: false,
        processData: false,
        success: function(res) {console.log(res)},
        error: function(res) {console.log(res)}
    })
});

然后是/bin/Admin.php

<?php
    ini_set('display_errors',1);
    ini_set('display_startup_errors',1);
    error_reporting(-1);

    $ds = DIRECTORY_SEPARATOR;

    require_once $_SERVER['DOCUMENT_ROOT']. $ds. 'wp-content'. $ds. 'plugins'. $ds. 'eng-dealer-map'. $ds. 'vendor'. $ds. 'autoload.php';

    var_dump($_POST);
    $admin = new \App\Endpoint\Admin(['action' => $_POST['action'], 'data' => $_POST['data']]);
    echo $admin->execute();

最终进入这个(缩小的)类:

<?php
    namespace App\Endpoint;

    class Admin
    {
        protected $db;
        protected $table;

        protected $sql;
        protected $data;

        public function __construct($foo)
        {
            require_once $_SERVER['DOCUMENT_ROOT']. DIRECTORY_SEPARATOR. 'wp-config.php';
            global $wpdb;

            $this->db = $wpdb;
            $this->table = '`'. $this->db->prefix .'trey_is_the_best`';

            $this->sql = $this->build($foo['action']);
            $this->data = $foo['data'];
        }

        public function build(string $action)
        {
            switch($action)
            {
                case 'insert': return $this->insertSql(); break;
                case 'update': return $this->updateSql(); break;
                case 'remove': return $this->removeSql(); break;
                default: throw new \Exception('trey'); break;
            }
        }

        public function execute()
        {
            if (!empty($this->sql)) {
                try {
                    if ($this->db->query($this->db->prepare($this->sql, $this->data))) {
                        return true;
                    } else {
                        throw new \Exception($this->db->last_error);
                    }
                } catch (\Exception $e) {
                    throw new \Exception($e->getMessage());
                }
            } else {
                return 'SQL empty!';
            }
        }
    }

不幸的是，$_POST 似乎在途中迷路了。将其添加到我的 JS 中:

for (let pair of formData.entries())
{
    console.log(pair[0]+ ', ' + pair[1]);
}

它正确地显示了我的数据。然后我在 bin/Admin.php 中 var_dump($_POST) 显示一个空数组。

我将 'data': formData 更改为 'data': 'hello, world' 所以我有一种感觉 FormData 不喜欢在 JSON 数组中其他元素？

那么如何将 FormData 和其他元素发送到我的 AJAX 脚本呢？我知道我可以使用:

formData.append('action', 'action-value')

但这感觉像是一个额外的步骤，因为它可以作为一个对象发送到我的脚本。

我还尝试在 formData 上使用 JSON.stringify 但同样没有任何结果。有没有一种方法可以在不使用 .append() 的情况下将 formData 与其他数据作为一个对象发送？或者这是我唯一的选择？

Answer 1

I have a feeling FormData doesn't like being inside a JSON array with other elements?

正确。您无法将 FormData 转换为 JSON。

So how do I send FormData with other elements to my AJAX script?

将额外数据添加到 FormData。

I know I could use:

formData.append('action', 'action-value')

是的，就这样做。

but that feels like it's an extra step when it could just been sent as one object to my script.

FormData 对象是一个对象。您只需将数据添加到其中，而不是将数据添加到不同的对象，然后尝试将 FormData 中的数据添加到其中。