首页 > 编程语言 > 详细

Flask(python)异步(ajax)返回json格式数据

时间:2019-04-28 12:20:51      阅读:424      评论:0      收藏:0      [点我收藏+]

主要讨论两个问题,第一个是关于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异步函数参考

Flask(python)异步(ajax)返回json格式数据

原文:https://www.cnblogs.com/commitsession/p/10781727.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!