Question

我制作了一个包含按钮的html模板，使用户可以在这些按钮切换到＆＃34; y＆＃34;之间切换这些按钮。和＆＃34; n＆＃34;我创建了一个提交按钮，onClick触发了一个发送我的Flask应用程序的功能这些按钮值的JSON。

但由于某种原因，我在Apache服务器上遇到了400个错误的请求（我使用的是云端环境）

这是提交按钮触发的提交功能：

function Submit() {
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "{{ url_for('preferences') }}", true);

    xhr.setRequestHeader("Content-type", "application/json");

    var content = "{'business':" + document.getElementById("business").value + ", 'entertainment':" + document.getElementById("entertainment").value + ", 'gaming':" + document.getElementById("gaming").value + ", 'general':" + document.getElementById("general").value + ", 'music':" + document.getElementById("music").value + ", 'politics':" + document.getElementById("politics").value + ", 'science-and-nature':" + document.getElementById("science-and-nature").value  + ", 'sport':" + document.getElementById("sport").value  + ", 'technology':" + document.getElementById("technology").value + "}";

    xhr.send(content);
  }

在我的烧瓶应用程序中，每当我尝试从请求对象访问JSON时，它都会一直返回None：

@app.route("/preferences", methods=["GET", "POST"])
@login_required
def preferences():
    if request.method == "POST":
        Preferences = request.get_json()

这里是html：

<div class="container">
    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="business" id="business" value= "n" 
    onClick="toggled(this)">business</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="entertainment" id="entertainment" value= "n" 
    onClick="toggled(this)">entertainment</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="gaming" 
    id="gaming"  value= "n" onClick="toggled(this)">gaming</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="general"  id="general" value= "n" 
    onClick="toggled(this)">general</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="music" 
    id="music" value= "n" onClick="toggled(this)">music</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="politics" id="politics" value= "n" 
    onClick="toggled(this)">politics</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="science-and-nature" id="science-and-nature" value= "n" 
    onClick="toggled(this)">science-and-nature</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="sport" id="sport" value= "n" 
    onClick="toggled(this)">sport</button>

    <button type="button" class="btn btn-primary btn-lg btn-block" 
    name="technology" id="technology" value= "n" 
    onClick="toggled(this)">technology</button>

    <button type="button" class="btn btn-secondary btn-lg btn-block" 
    onClick="Submit();window.location.href='{{ url_for('index') }}';">Set 
    Preferences</button>
</div>

btw toggled只是一旦按下

就会改变按钮元素的值和颜色的功能

如何通过XMLHttpRequest（）正确发送json以及如何在我的Flask App中正确访问它？

0 个答案: