我创建了一个非常简单的Django API . 它返回一个固定的数值(仅用于测试目的):
views.py
from django.http import HttpResponse
def index(request):
return HttpResponse(0)
我还有一个使用React JS开发的简单前端 . 为了开发后端和前端,我使用了这两个教程:
-
Django Python API:https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application
现在我想从ReactJS向Django API发送POST请求并传递 name
和 email
参数 . 我该怎么做?
这是我的App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
fullname: "",
emailaddress: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
render() {
return (
<div className="App">
<header>
<div className="container">
<nav className="navbar">
<div className="navbar-brand">
<span className="navbar-item">Forms in React</span>
</div>
</nav>
</div>
</header>
<div className="container">
<div className="columns">
<div className="column is-9">
<form className="form" onSubmit={this.handleSubmit}>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
className="input"
type="text"
name="fullname"
value={this.state.fullname}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Email</label>
<div className="control">
<input
className="input"
type="email"
name="emailaddress"
value={this.state.emailaddress}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<div className="control">
<input
type="submit"
value="Submit"
className="button is-primary"
/>
</div>
</div>
</form>
</div>
<div className="column is-3">
<pre>
<code>
<p>Full Name: {this.state.fullname}</p>
<p>Email Address: {this.state.emailaddress}</p>
</code>
</pre>
</div>
</div>
</div>
</div>
);
}
}
export default App;
1 回答
要从React应用程序发送HTTP请求,您有两个主要选项 .
使用集成的Fetch API(https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)或像axios(https://github.com/axios/axios)这样的东西 .
为了从表单获取信息,在每个输入上触发onChange,并将输入状态保存到组件状态 .
之后,这是一个使用
fetch API
的示例:最后,您需要使用
const responseJson = response.json();
将响应解析为JSON这回答了你的问题了吗?