zoukankan      html  css  js  c++  java
  • Flask(python)异步(ajax)返回json格式数据

    主要讨论两个问题,第一个是关于json.dumps 与jsonify区别,第二个是几种异步的区别(见jQuery中的$.getJSON、$.ajax、$.get、$.post的区别)。

    json.dumps()和jsonify()的区别

    • 使用方法不同:

    dumps和loads方法,来自json模块,而json模块是python中的,可以直接导入:

    import json

    而jsonify是flask封装的扩展包

    from flask import jsonify
    • 作用不同:

    ①dumps()和loads()

    json.dumps():把字典转成json字符串,

    json.loads():把json字符串转成字典

    他们操作的都是变量(变量是存储在内存中的)。

    ②jsonify

    字典转成json字符串

    • 效果不同:

    ①json.dumps()查看响应信息(Content-Type:响应内容的类型):Content-Type:text/heml;charset=utf-8

    ②jsonify查看浏览器响应信息(Content-Type:响应内容的类型):Content-Type: application/json

    相关代码如下:

    新建flask项目,建立一个app.py文件,代码如下:

    # coding: utf-8
    from flask import Flask, render_template, url_for, request, json, jsonify
    from flask_bootstrap import Bootstrap
    
    app = Flask(__name__)
    app.config['JSON_AS_ASCII'] = False
    
    
    @app.route('/form_data', methods=['GET', 'POST'])
    def form_data():
        if request.method=='GET':
            username = request.args.get("username")
            #dumps和loads方法,来自json模块,而json模块是python中的,可以直接导入:
            #而jsonify是flask封装的扩展包
            return jsonify({'status': '0', 'username': username, 'errmsg': '登录成功!'})
        else:
            username = request.form['username']
            return jsonify({'status': '0', 'username': username, 'errmsg': '登录成功!'})
    
    
    
    @app.route('/')
    def index():
        return render_template('test.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

    再在templates文件夹下新建test.html文件,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action='{{ url_for('form_data') }}' method="POST">
        <input name="username" type="text"/>
        <input type="submit">
    
    </form>
    <Br>
    <input type="button" name="sendjson" value="提交" id="sendjson">
    <div id="myDiv"></div>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script>
        $("#sendjson").click(function () {
            params = {"username": "lisi"}
    
            {#$.getJSON("{{ url_for('form_data') }}",params, function (result) {#}
            {#        $("#myDiv").append("hello world1");#}
            {#        console.log(obj.username + "<br>");#}
            {# });#}
    
            {#$.ajax({#}
            {#    "url": "{{ url_for('form_data') }}",#}
            {#    "type": "POST",#}
            {#    "data": params,#}
            {#    "success": function (obj) {#}
            {#        $("#myDiv").append("hello world")#}
            {#        console.log(obj.username + "<br>")#}
            {#    },#}
            {#    "error": function (obj) {#}
            {#        console.log(obj)#}
            {#    },#}
            {#    "dataType": "json",#}
            {#    "async": true#}
            {# });#}
    
            {#$.get("{{ url_for('form_data') }}", params, function (obj) {#}
            {#    $("#myDiv").append("hello world")#}
            {#    console.log(obj.username + "<br>");#}
            {# }, "json");#}
    
            $.post("{{ url_for('form_data') }}", params, function (obj) {
                $("#myDiv").append(obj.username + "<br>")
                console.log(obj);
            }, "json");
        })
        {#$('#sendjson').bind('click', submit_form);#}
    </script>
    </body>
    </html>

     案例截图:

     

    返回结果:

    参考:dumps与jsonify区别 ajax异步函数参考

  • 相关阅读:
    Glide加载网络图片与本地图片尺寸不一致
    android BLE 40 setCharacteristicNotification接收不到数据
    Android中颜色透明度对应16进制值
    模拟器不能运行 Failed to start emulator: Cannot run program "/home/kroaity/Downloads/android-sdk-linux//tools/emulator": error=2
    android SDK Manager 代理服务器设置
    if the parser found inconsistent certificates on the files in the .apk.104
    win7自带桌面便签
    unable to connect to the virtual device Genymotion 神器启动问题
    ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction
    获得root权限system/app下文件无法删除
  • 原文地址:https://www.cnblogs.com/hoaprox/p/10781727.html
Copyright © 2011-2022 走看看