如何解决反应导入形式:Ajax请求到axios
因此,我尝试使用axios制作此ajax表单,但由于某种原因它无法运行。它向我显示了前端,但背面没有任何内容。注释后的代码是我正在尝试使用axios的ajax请求,而我编写的axios在其下。
class IpvImport extends React.Component {
constructor(props) {
super(props);
this.state = {
requestObject: {},submitCompleted: false,disabled: false,};
}
handleSubmit(event,instance) {
var that = this;
var data = this.state.requestObject;
var dta = new FormData();
if (this.state.disabled) {
return;
}
this.setState({ disabled: true });
Object.keys(data).forEach(function (key,index) {
dta.append(key,data[key]);
});
//$.ajax({
// url: window.basePageUrl + "/ImportData",// type: "POST",// enctype: 'multipart/form-data',// data: dta,// processData: false,// contentType: false,// cache: false,// timeout: 600000,// success: function (importResult) {
// const newState = Object.assign({},that.state);
// newState.importLog = importResult;
// that.setState(newState);
// },// fail: function () {
// that.state.error = true;
// },// complete: function (data) {
// that.setState({ submitCompleted: true,error: that.error,disabled: false })
// }
//});
axios.post(window.basePageUrl + "/ImportData",{
dta
})
.then(function (response) {
const newState = Object.assign({},that.state);
newState.importLog = importResult;
that.setState(newState);
})
.catch(function (error) {
that.state.error = true;
}).then(() => {
that.setState({ submitCompleted: true,disabled: false })
})
event.preventDefault();
return false;
}
handleField(event,instance) {
const target = event.target;
const domType = target.tagNAME;
const inputType = target.attributes && target.attributes["type"] ?
target.attributes["type"].value : null;
var name = target.name;
var tagName = target.tagName;
if (inputType && inputType.toLowerCase() == "file") {
const newState = Object.assign({},this.state);
newState.requestObject[name] = target.files[0];
this.setState(newState);
}
else if (tagName && tagName.toLowerCase() == "select") {
const newState = Object.assign({},this.state);
newState.requestObject[name] = target.value;
this.setState(newState);
}
}
render() {
var that = this;
return <div class="sf-app" id="root">
<div id="root" class="sfMain sfClearfix sf-form -sf-centered-Box -sf-txt-align-left">
<div class="sfContent">
<div>
<div>
<label class="sf-field__label ng-tns-c9-8 ng-star-inserted">
<h1 class="title">File import</h1><br />
<h4 class="sub_title">Click on the button and select the file that you want to upload,then click import to import it</h4>
<h4 class="summary">File to import (.xlsx):</h4><br />
</label><br />
<input type="file" onChange={event => that.handleField(event,that)} id="XlsxFile" name="XlsxFile" /><br /><br />
</div>
</div>
<div>
<button type="button" id="submittBtn" class='sf-button -action' onClick={event => that.handleSubmit(event,that)} disabled={this.state.disabled}>
<span class="sf-button__content">
{this.state.disabled ? 'Importing...' : 'Import'}
</span>
</button>
</div><br />
{this.state.importLog != null ? Logs(this.state.importLog) : null}
</div>
</div>
</div>
}
}
const Logs = (props) => {
return (
<div class="log_panell">
<strong>Import log:</strong>
<ol>
{props.map(function (p) {
return <li class={p.Severity.toLowerCase()} dangerouslySetInnerHTML={{ __html: p.Message }}></li>
})}
</ol>
</div>
)
}
ReactDOM.render(
<IpvImport />,document.getElementById('root')
);
仅供参考:我是前任,我是React的新人,我正在尝试学习,如果您向我发送一些可以阅读和学习的链接,我将不胜感激。预先感谢
解决方法
axios.post(window.basePageUrl + "/ImportData",dta).....
dta应该是请求有效载荷
,您在此行中有错误
axios.post(window.basePageUrl + "/ImportData",{
dta
})
在ES6 {dta} shorthand to {dta: dta}
中,作为axios的第二个参数需要http请求的正文。
因为已经有了Form Object,您可以像这样直接传递它
axios.post(window.basePageUrl + "/ImportData",dta)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。