javascript - 在没有 JQuery 的 Ajax 中提交表单
问题描述
当用户更改另一个字段时,我正在尝试按照本指南更新表单字段。
我已经正确设置了我的 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
...
我没有想法......有什么想法吗?谢谢 !
解决方案
所以我选择使用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;
}
推荐阅读
- sqlite - Sqlite:可以使用随机名称(或没有名称)创建触发器吗?
- regex - 使用 Powershell 中的 re、exe 导入 .Reg 文件时出错
- tensorflow - TensorFlow 和 TF-Lite 的输出差异
- node.js - 如何获取谷歌云人才工作清单?
- java - 如何等待一个进程输出与 Java 中的模式匹配的行?
- email - 没有 IMAP/POP 通信的 SMTP
- ios - CocoaPods 找不到 pod "Moya" 的兼容版本
- selenium - 如何在 QAF 框架中找到驱动程序实例
- node.js - 动态链接库 (DLL) 初始化例程在使用 nodegit 的电子中失败
- python - 如何使用正则表达式通过 BeautifulSoup 获取脚本内的链接