我只是想了解ajax请求与django视图之间的连接,但我在切换开关时遇到错误。我有一个简单的开关,用于打开和关闭。当用户在交换机上时,django视图应该通过request.post获取值,但它无法从我的ajax请求中获取数据。我错过了什么或做错了什么?
def toggle(request):
status = {}
if request.method=="POST":
print('request', request.POST.get('toggle', ''))
status['message'] = 'success'
else:
status['message'] = 'error'
return HttpResponse(json.dumps(status), content_type="application/json")
frontendForm
class App extends Component {
constructor() {
super();
this.state = { toggled: true };
}
getChildContext() {
return { muiTheme: getMuiTheme(Style) };
}
handleToggle = (event) => {
// console.log(event.target.getAttribute('data-isToggled'));
console.log(event.target.value);
this.setState({
toggled: !this.state.toggled
});
axios({
method: 'POST',
url: '/toggle/',
headers: {
'X-CSRFToken': CSRF_TOKEN,
'Content-Type': 'application/json'
},
data:{
toggle:this.state.toggled
},
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div className="automation" style={automationStyle}>
<form>
<Card style={{ padding: '5em' }}>
<CardHeader
title="Turn on/off light"
titleStyle={{fontSize: '24px'}}
/>
<CardText>
<Toggle
label="On/Off"
id="toggle"
onToggle={this.handleToggle}
data-isToggled={this.state.toggled}
toggled={this.state.toggled}
labelStyle={{ fontSize: '24px' }}
labelPosition="right"
className="toggle"
/>
</CardText>
</Card>
</form>
</div>
);
}
}
答案 0 :(得分:2)
您正在发布JSON,但request.POST仅包含表单编码数据。
你有几个选择。第一种是使用application/x-www-form-urlencoded
作为内容类型,然后您可以使用request.POST
。
或者,您可以从request.body
获取json字符串并对其进行反序列化。
data = json.loads(request.body.decode('utf-8'))
toggle = data.get('toggle', '')