javascript - 发布时收到空请求

Question

我只是想了解 ajax 请求与 django View 之间的连接，但在打开和关闭开关时遇到错误。我有一个简单的开关，用于打开和关闭。当用户切换时，django View 应该通过 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")

前端表单

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>
        );
    }

}

Answer 1

您正在发布 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', '')