Python结合jquery Ajax 的实例

在折腾前端的时候,有时候要跟后端交互,需要调用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, 将前端的值传给了后端处理,并得到了一个返回:

这是一个非常简单的例子,为了就是更好的理解jquery中的ajax的用法。掌握了这些基本用法,就可以愉快的搭建工具来提高生产效率了。

原文发布于微信公众号 - python爱好部落(lovesweet2018)

原文发表时间:2019-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券