Python结合jquery Ajax 的实例

赵云龙龙

发布于 2019-08-18 14:34:03

3.7K0

发布于 2019-08-18 14:34:03

在折腾前端的时候，有时候要跟后端交互，需要调用Ajax, 原始的Ajax不那么好用，可以用jquery里面的。或者用插件axios。

jQuery对Ajax的操作进行了封装。jQuery中.ajax()属于最底层的方法。先来看一个简单的例子：

$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"GET",   //请求方式 get 或者post
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});

url 必需。规定把请求发送到哪个 URL。 data 可选。映射或字符串值。规定连同请求发送到服务器的数据。 type: post or get, 请求方式 dataType 可选。规定预期的服务器响应的数据类型。 success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

$.ajax()参数说明：

url(String):发送请求地址。
type(String):请求方式(POST或GET)，默认为GET。其他HTTP请求方法如PUT、DELETE，仅部分浏览器支持。
data(Object或String):发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式，例如{id:"xxyh", password:"123456"}转换为&id=xxyh&password=123456。如果是数组，将自动为不同值对应同一个名称。例如{name:["xxyh","dudu"]}转换为&name=xxyh&name=dudu。
dataType(String):预期服务器返回的数据类型。如果不指定，jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型：
xml:返回XML文档，可用jquery处理
html:返回纯文本HTML信息，包含的script标签会插入DOM时执行。
script:返回纯文本JavaScript代码。如果没有设置cache参数，不会自动缓存结果。在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。
json:返回JSON数据。
jsonp:JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text:返回纯文本字符串。
complete(Function):请求完成后回调函数(请求成功或失败后均调用)。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
  function(XMLHttpRequest,textStatus){
      this;   // 调用本次Ajax请求时传递的options参数
  }
success(Function):请求成功回调函数。有2个参数：
参数：由服务器返回，并根据dataType参数进行处理后的数据和描述状态的字符串。
  function(data, textStatus) {
      // data 可能是xmlDoc,jsonObj,html,text等
      this;   // 调用本次Ajax请求时传递的options参数
  }
error(Function):请求失败时被调用的函数。这个函数有3个参数，即XMLHttpRequest对象、错误信息和捕获的错误对象

  function(XMLHttpRequest, textStatus, errorThrown){
      // 通常情况下textStatus和errorThrown只有一个包含信息
      this;   // 调用本次Ajax请求时传递的options参数
  }
contentType(String):当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。

jsonp(String):在一个jsonp请求中重写回调函数的名字。用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致将“onJsonPLoad=?”传给服务器。

cache
要求为Boolean类型的参数，默认为true（当dataType为Script时，默认为false），设置false将不会从浏览器缓存中加载请求信息。

获取JSON数据接下来通过$.ajax()获取json数据。jquery代码：

$(function () {
    $("#send").click(function () {
        $.ajax({
            type:"GET",
            url:"demo.json",
            dataType:"json",
            success: function (data) {
                $("#resText").empty();
                var html = "";
                $.each(data, function (commentIndex, comment) {
                    html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
                            "</a><span class='location'>" + comment['location'] +
                            "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
                });
                $("#resText").html(html);
            }
        })
    });
})

如果我们用flask来写个例子，当然前端数据可以获取，那么前端大约是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.css" rel="stylesheet">
</head>
<body>

<div id="example-5">

<div class="four wide field">
    <div id="blurb-test-submit" class="ui primary submit button">Submit</div>
</div>
</div>

<script>
    let submit = $('#blurb-test-submit');
submit.click(function () {
    submit.addClass('loading disabled');
    $.ajax({
        type: 'GET',
        url: '/progress',
        data: {"memberid":"1","env":"qa"},
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            if (data.error) {
                console.log(data);
            } else {
                console.log(data.password);
            }
        },
        complete: function () {
            submit.removeClass('disabled loading');
        }
    });
});
</script>

</body>
</html>

后端可以用flask来搭，代码大约是这样的：

from flask import Flask, request, redirect, url_for, render_template, Response, jsonify, make_response

app = Flask(__name__)

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

@app.route('/progress', methods=['GET'])
def get_progress():
    if request.method == "GET":

        memberid = request.args.get("memberid")
        env = request.args.get("env")

        if memberid == "":
            password = "Error! Please input memberid"

        else:
            password = env
        return jsonify({"password": password})

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

运行起来，可以看到，通过ajax, 将前端的值传给了后端处理，并得到了一个返回：