Question

我正在尝试使用AJAX进行简单的客户端/服务器通信，但是我无法从服务器获得响应。我正在将虚拟数据发送回客户端（出于测试目的），它仍然无法正常工作。

[假定的问题]

奇怪的是，通过查看浏览器的控制台，console.log('start')和console.log('end')迅速真正显示然后消失。同样，对于回复也可能如此，我没有时间看到它们。是因为post事件中运行了onclick吗？

我有一个输入，一旦被触发，它将运行如下功能：

HTML

<form action="#" method="POST">
   <textarea name="text" class="text-editor", spellcheck="false", autocomplete="off", autofocus>##Type sth</textarea>
   <input type="submit" id="clickme">
</form>

客户端

document.getElementById("clickme").onclick = showdownText;

function showdownText(){

    console.log('start')
    
    $.post('/_get_payload', {
        text: textEditor.value
    }).done(function(data){
        console.log('success')
    }).fail(function(){
        console.log('fail')
    });

    console.log('end')
    
}

服务器端

@app.route('/_get_payload', methods=['POST'])
def get_payload():
    data = request.form['text']

    post = Post(text=data)
    db.session.add(post)
    db.session.commit()

    print(post)

    return jsonify({ 
        "username": "admin",
        "email": "admin@localhost",
        "id": 42
    })

问题：为什么即使我发送了伪数据也没有从服务器取回有效载荷？

Answer 1

当您单击<input>元素内的提交按钮（<button>或带有type="submit"的{{1}}和<form>）时，浏览器将向服务器发送POST请求，并且页面将被重新加载，这就是console.log的内容将消失的原因。

在您的情况下，由于您使用AJAX发送POST请求，因此无需创建<form>或<input type="submit">元素，只需使用此

<textarea name="text" class="text-editor" spellcheck="false" autocomplete="off" autofocus>##Type sth</textarea>
<button id="clickme">Submit</button>

P.S。无需在HTML属性之间添加逗号。

jsonify没有将数据发送回javascript

1 个答案: