Flask与ajax（jQuery）交互的几种方法：$.post、$.get、$.getJSON 、$.ajax、 $.load

本文介绍jQuery封装的几种ajax方法与Flask后端交互的实现。jQuery封装的ajax方法有post、get、getJSON、ajax、load等，使用起来很方便。

目录结构如下：

|--|
   |--run.py
   |--static
      |--test.txt
   |--templates
      |--index.html

前端代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery Ajax Test</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
<script>
$(document).ready(function(){
   $(".btn1").click(function(){
      $.get("/mystring",function(data, status){
         alert("数据: " + data + "\n状态: " + status);
      });
   });

    $(".btn2").click(function(){
      $.get("/mydict",function(data, status){
         alert("name: " + data.name + " age:" + data.age);
      });
   });

    $(".btn3").click(function(){
      $.get("/mylist",function(data, status){
         alert("name: " + data[0]+ " age:" + data[1]);
      });
   });

    $(".btn4").click(function(){
      $.ajax({url:"/mystring", data:{"mydata": "test"},success:function(data){
         alert(data);
      }});
   });

       $(".btn6_2").click(function(){
      $.ajax({url:"/dataFromAjax", data:{"mydata": "test data"},success:function(data){
         alert(data);
      }});
   });

    $(".btn5").click(function(){
      $.ajax({url:"/mydict", success:function(data){
         alert("name: " + data.name + " age:" + data.age);
      }});
   });

    $(".btn6").click(function(){
      $.ajax({url:"/mylist", success:function(data){
         alert("name: " + data[0] + " age:" + data[1]);
      }});
   });

   $(".btn7").click(function(){
        $("p").load("../static/test.txt");
   });
   $(".btn10").click(function(){
        $("p").load("/mystring");
   });

    $(".btn8").click(function(){
        $.getJSON("/mydict",function(data){
            $.each(data, function(i, field){
                $("div").append(field + " ");
            });
        });
    });

    $(".btn9").click(function(){
        $.post("/mydict", function(data, status){
         alert("name: " + data.name + " age:" + data.age);
    });
});
});
</script>

</head>
<body>
    <h1>Ajax Test</h1>
    <button class="btn1">get string</button>
    <button class="btn2">get dict</button>
    <button class="btn3">get list</button> <br/><br/>
    <button class="btn4">ajax string</button>
    <button class="btn5">ajax dict</button>
    <button class="btn6">ajax list</button>
    <button class="btn6_2">ajax sentDataToFlask</button><br/><br/>
    <p>load:</p>
    <button class="btn7">load  from file</button>
    <button class="btn10">load</button><br/><br/>
    <div>getJson: </div><br/>
    <button class="btn8">getJson</button><br/><br/>
        <button class="btn9">post</button>
</body>
</html>

PS: test..txt文件放在flask工程的 static文件夹下。

Flask后端代码如下：

run.py

from flask import Flask, render_template, request
from flask import jsonify

app = Flask(__name__)
app.config['SECRET_KEY'] = "dfdfdffdad"

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

@app.route('/mystring')
def mystring():
    return 'my string'

@app.route('/dataFromAjax')
def dataFromAjax():
    test = request.args.get('mydata')
    print(test)
    return 'dataFromAjax'

@app.route('/mydict', methods=['GET', 'POST'])
def mydict():
    d = {'name': 'xmr', 'age': 18}
    return jsonify(d)

@app.route('/mylist')
def mylist():
    l = ['xmr', 18]
    return jsonify(l)


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

运行run.py，在浏览器打开http://127.0.0.1:5000/点击页面上的按钮即可测试不同的jQuery封装的ajax方法。

完整代码下载地址：https://github.com/xmanrui/FlaskConnectAjax 点击打开链接

原文链接：https://blog.csdn.net/xiemanR/article/details/53812535