python web框架之jQuery+Ajax+Django/flask 前后端交互完美案例

python web框架：flask和django入门，jQuery+ajax示例

博客由本人原创，如需转载请附上博文地址！

前言：网上看了很多关于python web框架的前后端传值代码，写的很乱，对初学者很不友好。我踩过很多坑，写此贴以作为警示，一口吃一个胖子肯定是不行的，学习web框架中jQuery+Ajax的异步传值，如果连Ajax和jQuery的基础都不好，肯定是很费劲的，启示我以后学习应该逐步进行，到网上到处翻资料一个一个试代码太费时间了，有空的时候多看看书，系统地学一学比什么都强。本博客为了记录开发过程中犯下的错误，个人认为还是属于最基础层面，如有不足之处欢迎留言指出，谢谢!

 

首先看Django

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

1.前端:form表单。文件：index.html

<form id="my_form" method="get">
    <input type="text" name="rec_user" id="rec_text"/>
    <input type="button" id="target_test" value="Rec"/>
</form>
<script src="/static/js/jsTest.js"></script>

2.单独的js文件，写jQuery+Ajax代码。文件：jsTest.js

$("$target_test").click(function(){
    $.ajax({
        url:"/test/",
        type:"GET",
        dataType:"json",
        async:true,
        data:{user:$("#rec_text").serialize()},  //.val()应该也是可以的
        success:function(result){
            //回调函数,接收views传回的数据，在前端展示
            var d = result["……"]
            document.getElementById("……").setAttribute("……",d)
            //$("#……").html(d)
        },
        error:function(XMLHttpRequest,textStatus,errorThrown){
            alert(XMLHttpResponse.status)
            ……
        },
    })
})

3.django的urls.py中的映射配置

urlpatterns = [
    path('',views.index),
    path('test/',views.do_filter)
]

4.django的views.py中的函数，处理逻辑

def index(request):
    return render(request,'index.html')


def do_filter(request):
    if request.is_ajax():
        usr = request.GET['user']
        # 传过来的数据格式为: rec_text=……
        # 此处是为了取出"="后面的值
        # print(usr)
        correct_usr = usr[9:]

    # return HttpResponse(json.dumps(……))
    return HttpResponse(…….to_json())    

 

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

其次是flask

flask的前后端交互也是费了我好长时间，和django一样，关于是否需要序列化，数据格式到底是类似字典的格式还是直接传，到底是get方法还是post方法，究竟是使用form表单还是input标签，这些都是选择，就是因为选择太多，又没有一个标准答案，网上的代码也是千奇百怪，我弄了好久才成功。感觉到自己还是基础太不扎实了，不论是html，css，js还是Ajax，web框架配置。说了这么多前端好像也没什么别的东西了。总之就是还是要把基础打牢，然后懂得原理，这样才能提高开发效率，减少不明所以浪费时间的bug。

 

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

1.前端：文件：index.html。这回我没有使用表单，而是仅仅使用input标签的button和text属性来完成数据交互任务。以后再试试form吧哈哈哈，拖延症又犯了……

<!--很简单的两行代码，一个按钮一个输入框，省略了不必要的class属性-->
<input id="flask" type="text"/>
<input id="test" type="button">Go!</input>
<script src="/static/js/logic.js"></script>

2.logic.js文件，用来写jQuery+Ajax

方法一：

$("#test").click(function () {
    $.ajax({
        url:"/testController", //注意此处写法,对应路由写法/testControlller/，/testController/
        type:"GET",
        dataType:"json",
        async:true,
        data:{usr:$("#flask").val()},   //此处使用$("#flask").serialize()后端接收不到数据
        success:function (result) {
            // 回调函数，处理app.py返回的结果
        },
        error:function (XMLHttpRequest,textStatus,errorThrown) {
            alert(XMLHttpRequest.status)
            alert(XMLHttpRequest.readyState)
            alert(textStatus)
        }
    });
})

 

方法二：

$("#test").click(function () {
    // var data_flask = $("#flask").serialize() 这句话不对,后端会显示None
    var data_flask = $("#flask").val()
    var get_data = {"usr":data_flask}
    $.ajax({
        url:"/testController",
        type:"GET",
        dataType:"json",
        async:true,
        data:get_data,
        success:function (result) {
            //  回调函数，可以console.log(result)做一个测试
        },
        error:function (XMLHttpRequest,textStatus,errorThrown) {
            alert(XMLHttpRequest.status)
            alert(XMLHttpRequest.readyState)
            alert(textStatus)
        }
    });
})

3.app.py函数，路由转发。

from flask import Flask
from flask import render_template
from flask import jsonify
from flask import request
from flask import json
app = Flask(__name__)


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

//注意路由写法。如果路由写法为/testController，那么Ajax url写法必须为/testController
@app.route('/testController/',methods=['GET'])
def testController():
    test_flask = request.values.get("usr")
    print(test_flask)

    //返回必须是json格式
    return json.dumps(test_flask)

if __name__ == '__main__':
    app.run()

目前从我学习的过程来看，django和flask+Ajax最易出错的地方就是路径，路由和前后端数据传递（主要是json格式问题，还要python和js处理json的方法不熟悉），如何将前后端组织起来，是否使用form表单，form表单的action要不要写，input标签到底是submit type还是button type，到底是button标签还是input标签，是点击按钮用oncllick触发js还是js监听按钮点击事件，这些是我们需要研究的非常重要的事情，当然我上一句话问了那么多问题，也说明我的前端基础很薄弱，走了太多弯路。我学到的经验是，传递都使用json格式，提交数据到后台不一定使用form，jQuery取到html标签值一般不会出错，除非id发生冲突等，对flask.request和django里面request的用法也不是很熟悉，还是要多看官方的文档和正确的文档代码才行。

 

这几天学习python web的经历让我明白了基础的重要性。打好了语言基础，会使用检查元素调试代码，会查看请求响应信息，懂得浏览器原理，以后做前端这方面会轻松一些。从整体看，不论是做任何开发，好的基础能够让你少犯低级错误，知道如何对错误进行定位，如何快速了解错误原理，提高开发效率，心累的时候也会少一些。