帶有AJAX帖子的Flask應用顯示404（未找到）

Question

我是新來的，並且制作了一個小的Flask應用程序。

我已經遍歷了所有可以在網上找到的類似內容，但仍然無法獲得使用AJAX將數據從客戶端傳遞到服務器端的最小工作示例。

以下是相關的HTML：

<script type=text/javascript>
$(function() {
  $('a#test_function').bind('click', function() {
    $.ajax({
          url: $SCRIPT_ROOT + '/test',
          data: JSON.stringify({ "value":'asdf' }),
          type: 'POST'
          success: function(response) {
               console.log(response);
          },
          error: function(error) {
               console.log(error);
          }
        });
      });
    });
</script>

<h1>jQuery Example</h1>
<a href=# id=test_function>get string</a>

這是.py文件：

import os
from flask import Flask, request, session, g, redirect, url_for, abort, render_template, flash, jsonify, json

# create our little application :)
app = Flask(__name__)

# Load default config and override config from an environment variable
app.config.update(
DATABASE=os.path.join(app.root_path, 'mydb.db'),
DEBUG=True,
SECRET_KEY='something',
SERVER_NAME='http://localhost:5000'
)

@app.route('/')
def welcome():
    flash('Welcome!')
    return render_template('index.html')


@app.route('/test', methods=['GET', 'POST'])
def test():
    vars = request.data
    return ', '.join([str(i) for i in vars])

當我運行服務器並嘗試運行發布請求時，出現以下錯誤：

 POST http://127.0.0.1:5000/test 404 (NOT FOUND)

任何幫助，不勝感激！

Answer 1

為了通過XHR將JSON數據發布到Flask，我使用的方法是將Content-Type標題設置為"application/json" 。 然后，您可以從request.data對象在Flask中訪問此對象。 我也清理了一些錯字。

Javascript / HTML：

<script type="text/javascript">

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

    $(function() {
        $('a#test_function').bind('click', function() {
            $.ajax({
                type: "POST",
                headers: {"Content-Type": "application/json"},
                url: $SCRIPT_ROOT + "/test",
                data: JSON.stringify({"key": "value"}),
                success: function(response) {
                    console.log(response);
                },
                error: function(response, error) {
                    console.log(response);
                    console.log(error);
                }
            });
        });
    });
</script>

<h1>jQuery Example</h1>
<a href="#" id="test_function">get string</a>

蟒蛇：

@app.route('/test', methods=['GET', 'POST'])
def test():
    vars = request.data
    return ', '.join([str(i) for i in vars])