Question

1。在此示例代码中，当您单击日期时，会将JSON字符串发送到我的Flask视图。

2。然后，我打算在Flask视图（ajax.py）中进行一些更高级的处理，但现在我只返回带有额外消息的相同JSON数据，并且仅返回列表键的第4个项目。

3。 Flask视图将JSON数据发送回Flask模板的第三阶段是我遇到问题的地方。我真的不明白如何从Flask模板访问JSON数据？

使用Chrome的控制台模式时：

* Network > XHR > Response

我看到我已经在控制台模式下收到了这些数据，但是如何从我的Flask模板文件中访问这些值？

{
  "age": 35, 
  "full_date": "2019-07-18", 
  "location": "United States", 
  "name": "Anthony", 
  "randomkeyinlist": "four", 
  "result": "Success!"
}

from flask import Flask
from flask import jsonify
from flask import redirect
from flask import render_template
from flask import request
from flask import url_for

app = Flask(__name__)

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

@app.route('/_get_data', methods=['POST'])
def get_data():
    # dictionary
    data = request.get_json()

    full_date = data['full_date']
    name = data['name']
    age = data['age']
    location = data['location']
    randomlist = data['randomlist']

    return jsonify({'result': 'Success!',
                    'full_date': full_date,
                    'name': name,
                    'age': age,
                    'location': location,
                    'randomkeyinlist': randomlist[3]
    })

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JSON Flask AJAX</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- _______________________________________________________________________ -->

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<!-- _______________________________________________________________________ -->

<script type="text/javascript">
$(document).ready( function() {

  //----------------------------------//
 //  jQuery UI Datepicker: Settings  //
//----------------------------------//
$('#inlineDate').datepicker({
    altField: "#demoDate",
    showOtherMonths: true
});

  //----------------------------------------//
 //  jQuery UI Datepicker: getDate method  //
//----------------------------------------//
$('#inlineDate').change(function() {
    "use strict";
    var date = $(this).datepicker('getDate');
    var $fullDate;

    $fullDate = $.datepicker.formatDate('yy-mm-dd', date);

      //--------//
     //  AJAX  //
    //--------//
    const toSend = {
        full_date: $fullDate,
        name: "Anthony",
        age: 35,
        location: "United States",
        randomlist: ["one", "two", "three", "four"]
    };

    // Convert js value to JSON string.
    const jsonString = JSON.stringify(toSend);
    console.log(jsonString);

    // Create XMLHttpRequest object.
    const xhr = new XMLHttpRequest();

    // Send HttpRequest to web server.
    xhr.open("POST", "/_get_data");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(jsonString);

}); // END getDate method

}); // END .ready event
</script>

<!-- _______________________________________________________________________ -->

<style>
th, td { border: 1px solid black; }
</style>

</head>
<body>

<!-- jQuery UI DatePicker Widget -->
<form method="post" action="#">
    <div id="wrapper" class="ui-widget">
    <label for="demoDate">Date: </label><input id="demoDate"/><span id="inlineDate"></span>
    </div>
</form>

<br>

<table>
    <tr>
        <th>Status</th>
        <th>Task</th>
    </tr>

    <tr>
        <td>Check</td>
        <td>Receive JSON data from Flask view.</td>
    </tr>

    <tr>
        <td>How?</td>
        <td>Access received JSON data in Template.</td>
    </tr>
</table>

</body>
</html>

如何从Flask模板访问接收的JSON数据？

0 个答案: