javascript - How to send POST request to Django API from ReactJS web app?
问题描述
I created a very simple Django API. It returns a fixed numeric value (just for testing purpose):
views.py
from django.http import HttpResponse
def index(request):
return HttpResponse(0)
I also have a simple front-end developed using React JS. To develop the backend and front-end, I was using these two tutorials:
Django Python API: https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application
Now I want to send a POST request to Django API from ReactJS and pass name
and email
parameters. How can I do it?
This is my 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;
解决方案
要从 React 应用程序发送 HTTP 请求,您有两个主要选项。
使用集成的 Fetch API ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) 或类似 axios ( https://github.com/axios/axios ) 的东西。
为了从表单中获取信息,onChange
在每个输入上触发,并将输入状态保存到组件状态。
onChange = (prop: any, value: string) => {
this.setState({
[prop]: value
});
};
之后,这是一个使用示例fetch API
:
const response = fetch("endpoint_url", {
method: 'POST',
body: JSON.stringify({
this.state.name,
this.state.email
// Other body stuff
}),
headers: {
'X-Api-Key': API_KEY,
'Content-Type': 'application/json'
// Other possible headers
}
});
最后,您需要使用 JSON 将响应解析为const responseJson = response.json();
推荐阅读
- java - 应用程序在某些设备中未收到启动完成的意图
- c# - 从列表中删除单个项目的最快方法是什么
在订单重要的地方没有重复? - c++ - 尝试从目标文件编译时对“glfw ...”函数的未定义引用
- wordpress - 添加指向 Buddypress 个人资料选项卡二级菜单的链接
- ruby-on-rails - 如何仅由响应负责人获得 ajax 承诺?
- react-native - 如何在 Android 和 IOS 的原生反应中使用复选框?
- python - How do I reimplement the itemChange and mouseMoveEvent of a QGraphicsPixmapItem?
- eclipse - 从 html 文件中提取 £(英镑)货币符号和金额 (56)
- java - 为什么使用netty循环writeAndFlush发送DatagramPacket必须让线程休眠一段时间?
- sql-server - 使用 where 子句插入多列