Question

我已经看过类似的帖子（这是我如何达到当前的实现）但是我无法使下面的代码工作。我想：

接收用户的输入（徽章ID）
通过ajax
处理徽章ID并发回结果
通过javascript接收回复和处理，通过HTML输出到屏幕上。

目前正在发生什么： 500错误TypeError：＆＃39; NoneType＆＃39;对象不可订阅。

当我使用邮递员向烧瓶提交JSON时，回复工作完美。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>App</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="{{ url_for('static', filename='form.js') }}"></script>
</head>
<body>
<div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" id="badge" name ="badgeinput" placeholder="Badge Scan..">
        <button type="submit" class="btn btn-default">Submit</button>
        <br>
        <br>
        <div class="container">
            <span name="result" id="result">... </span>
        </div>

    </div>
    </form>
    <br>
</body>
</html>

form.js：

$(document).ready(function() {

        $('form').on('submit', function(event) {

            $.ajax({
                data : {
                    badge_ID: $('input[name="badgeinput"]').val(),
                },
                type : 'POST',
                url : '/process'
            })
            .done(function(data) {
                document.getElementById('#result').innerHTML = data.result;

            });

            event.preventDefault();

        });

    });

烧瓶中：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/process', methods=['POST'])
def process():

    badge = request.json['badge_ID']
    one = "Test"
    new_badge_id = badge + one
    return jsonify({'badge_ID' : new_badge_id})


if __name__ == '__main__':
    app.run(host="localhost", port=4000, debug=True)

Answer 1

我说这是你输入的问题您应该检查"{ \"metadata\":[{\"client\":\"name\"...是否有任何价值。

您还可以在浏览器中使用开发人员工具（F12）来验证您发送的数据是否正确，并检查网络标签中的帖子标题。

Answer 2

您尚未指定发布数据类型，因此最好将其视为form而不是JSON。您可以设置要发布的类型，并且对于不使用以下内容获取数据有点安全：

request.form.get('badge_ID', None)

然后，您的jquery.done部分似乎有拼写错误。

return jsonify({'badge_ID' : new_badge_id})

因为你的结果是

{"badge_ID": new_badge_id}

您没有data.result，您应该尝试data.badge_ID

因为在您的评论中，您提到您的视图中没有None badge_ID，所以很有可能在代码中更改此部分会修复它。

PS：我会将您的JS代码更改为Jquery，如下所示：

$("#result").html(data.badge_ID);

但您自己的JS应该可以正常使用。

在javascript中处理来自flask服务器的JSON回复，并以HTML格式显示返回的值

2 个答案: