在没有 JQuery 的 Ajax 中提交表单

Question

我正在尝试按照this 指南在用户更改另一个字段时更新表单字段。

我已经正确设置了我的 FormTypes，但是我在 没有 JQuery 的情况下在 Ajax 中提交表单时遇到了问题。

我有 2 个选择：

const blockchain = document.getElementById('strategy_farming_blockchain');
const dapp = document.getElementById('strategy_farming_dapp');
const csrf = document.getElementById('strategy_farming__token');

blockchain 字段应该更新dapp 字段。

如果我提交整个表单，它就可以工作：

blockchain.addEventListener('change', function () {
    const form = this.closest('form');
    const method = form.method;
    const url = form.action;

    var request = new XMLHttpRequest();
    request.open(method, url, true);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            //Success
            const html = new DOMParser().parseFromString(this.response, 'text/html');
            dapp.innerHTML = html.querySelector('#strategy_farming_dapp').innerHTML;
        } else {
            //Error from server
            console.log('Server error');
        }
    };

    request.onerror = function () {
        //Connection error
        console.log('Connection error');
    };

    request.send(new FormData(form));
});

但我不应该提交整个表单，我应该只提交 blockchain 值

我尝试了很多东西，比如

var formdata = new FormData(form);
formdata.delete(dapp.name);
request.send(formdata);
// It's working for a new entity, but if I'm editing one, it's not updating the dapp field...

或

var formdata = new FormData();
formdata.append(this.name, this.value);
formdata.append(csrf.name, csrf.value);
request.send(formdata);
// It's working in a NEW action, but not in an EDIT action...

或

var data = {};
data[this.name] = this.value;
request.send(data);
//or
request.send(JSON.stringify(data));
//If I dump($request->request) in the controller, it seems like there's no data... 
//Or the request isn't parsed correctly, or there's something missing ?

我也试过encodeURIComponent...

我没有想法......有什么想法吗？谢谢！

Answer 1

所以我选择使用FormData 并删除dapp 字段。

const blockchain = document.getElementById('strategy_farming_blockchain');
const dapp = document.getElementById('strategy_farming_dapp');

blockchain.addEventListener('change', function () {
    const form = this.closest('form');
    const method = form.method;
    const url = form.action;

    var request = new XMLHttpRequest();
    request.withCredentials = true;
    request.open(method, url, true);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            //Success
            const html = new DOMParser().parseFromString(this.response, 'text/html');
            dapp.innerHTML = html.querySelector('#strategy_farming_dapp').innerHTML;
        } else {
            //Error from server
            console.log('Server error');
        }
    };

    request.onerror = function () {
        //Connection error
        console.log('Connection error');
    };
    var formdata = new FormData(form);
    formdata.set(dapp.name, "");
    request.send(formdata);
});

这是表单类型

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        //...
        ->add('blockchain', EntityType::class, [
            'required' => false,
            'class' => Blockchain::class,
            'attr' => ['class' => 'js-select2'],
        ]);

    $formModifier = function (FormInterface $form, Blockchain $blockchain = null) {
        $dapps = null === $blockchain ? [] : $blockchain->getDapps();
        $form->add('dapp', EntityType::class, [
            'class' => Dapp::class,
            'required' => true,
            'choices' => $dapps,
            'placeholder' => 'My placeholder',
            'attr' => ['class' => 'js-select2'],
        ]);
    };

    $builder->addEventListener(
        FormEvents::PRE_SET_DATA,
        function (FormEvent $event) use ($formModifier) {
            /**
             * @var StrategyFarming $data
             */
            $data = $event->getData();
            $blockchain = $data->getDapp() ? $data->getDapp()->getBlockchain() : null;
            $formModifier($event->getForm(), $blockchain);
        }
    );

    $builder->get('blockchain')->addEventListener(
        FormEvents::POST_SUBMIT,
        function (FormEvent $event) use ($formModifier) {
            $blockchain = $event->getForm()->getData();
            $formModifier($event->getForm()->getParent(), $blockchain);
        }
    );

}

为了让它工作，我必须将区块链字段添加到我的表单实体中，以便请求处理该字段：

/**
 * Not persisted
 * @var Blockchain
 */
private $blockchain;

public function getBlockchain(): ?Blockchain
{
    if ($this->blockchain === null && $this->dapp !== null && $this->dapp->getBlockchain() !== $this->blockchain) {
        $this->blockchain = $this->dapp->getBlockchain();
    }
    return $this->blockchain;
}

public function setBlockchain(?Blockchain $blockchain): self
{
    $this->blockchain = $blockchain;

    return $this;
}