如何解决Ext js 7 现代,form.submit 与 ajax.request
我有一个带有多个 textareafield 和 fileinput 这样的 Ext.form.Panel
// https://requestbin.com/r/en0ej96odon2sm/1n6r1tb49KK6eObGMPHlYa1hh4C
Ext.create({
xtype: 'formpanel',renderTo: document.body,buttons: {
submit: 'onSubmit',},controller: {
onSubmit: function () {
var form = this.getView();
form.submit({
method: 'POST',url: 'https://en0ej96odon2sm.x.pipedream.net/test1',success: function () {}
});
},onSubmitTest: function () {
var form = this.getView();
Ext.Ajax.request({
url: 'https://en0ej96odon2sm.x.pipedream.net/test2',method: 'POST',params: {
data: form.getValues(),items: [{
xtype: 'textareafield',name: 'testfield',label: 'testfield',value: 'test\nasd',{
xtype: 'filefield',label: 'Upload Test',name: 'basedata-test',{
xtype: 'button',text: 'Ajax.request(),linebreaks but no files',handler: 'onSubmitTest',}]
});
发布结果: https://requestbin.com/r/en0ej96odon2sm/1n6mtu8QtyreaisCAmV3csO724Q
小提琴: https://fiddle.sencha.com/#view/editor&fiddle/3b9j
所以,因为我需要 fileinput/multipart,所以我必须使用 form.submit({})。
但是当我这样做时,我的 $_POST Var 中没有服务器端的换行符。
当我执行 ajax.request({}) 时,一切看起来都不错,但缺少 $_FILES,所以这不是一个真正的选择。 (但这是记录在案的)。
我也尝试将 jsonSubmit 添加到表单中(然后我根本没有 $_POST )。 当我添加 enableSubmissionForm: false 时,我得到了换行符,但提交后表单消失了(我不知道为什么)。
是否有解决方案或我做错了什么?
解决方法
您可以使用以下覆盖。希望它不会使框架不稳定;)
<Project Sdk="Microsoft.NET.Sdk">
,
不理想,但您也可以这样做:
form.submit({
method: 'POST',//just like the ajax
params: {
data: form.getValues(),},url: 'https://en0ej96odon2sm.x.pipedream.net/test1',success: function () {}
});
,
这是使用 Ajax.request 而不是 form.submit 的简单解决方法
我需要它,因为我必须设置一个 Authorization 标头,而框架使用的 IFRAME 无法做到这一点
因此阻止 Ext.data.request.Ajax 设置 Content-Type
标头似乎可以完成这项工作。
multipart/form-data
将自动设置。
警告:options.headers
和 defaultHeaders
都不应该有“Content-Type”标头
Ext.define('Override.data.request.Ajax',{
override: 'Ext.data.request.Ajax',setupHeaders: function(xhr,options,data,params) {
if (data instanceof FormData) {
if (Ext.apply({},options.headers || {},this.defaultHeaders).hasOwnProperty('Content-Type')) {
console.warn('The Content-Type header must not be set before request if you need to use FormData with this override');
}
/* prevent Ext.data.request.Ajax from setting Content-Type header */
return this.callParent([xhr,null,null]);
} else {
return this.callParent(arguments);
}
}
});
并使用 FormData 作为 rawData
var formData = new FormData();
var files = myView.down('filefield').getFiles();
if (files.length > 0) {
formData.append('file',files[0],files[0].name);
}
Ext.Ajax.request({
url: 'your_url',rawData: formData,success: function(response) {
// handle success
},failure: function(response) {
// handle failure
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。