第一次使用油猴写脚本，jquery前后端交互

前言

  大一就用到现在的油猴插件，给了我好多的便利，同样是开发前端，我只是会做一个网页，人家就可以使用js脚本控制各种网页以实现一些比较骚的操作。特别是在上网课的时候用到别人的插件，简直是爽翻天了，我曾经在使用js库的时候也用到过类似的功能，只是我没想到这玩意儿还能这样用！不多解释，先写一个ajax交互的试试!

---

开搞

1.在油猴添加新脚本

image.png

2.要添加的脚本

image.png

3.引入jQuery
// @require https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
人家是这样引入的，这个东西的版本不宜过高，过高会报一些不知名的bug

4.写个Ajax的get方法

    $.get("http://127.0.0.1:5000/js/cscsc",function(data){
        console.log(data);
    });

5.后端用flask接一下

@app.route('/js/', methods=['get','post'])
def get(ss):
    print(ss)
    return ss+"    get"

6.控制台打印

image.png

7.写一个对象，并且赋值给另一个对象

    var test = {
        a: {one: 1, two: 2, three: 3},
        b: [1,2,3]
    };

    var data = {
        data: JSON.stringify({
            "value":test
        })
    }

8.写个Ajax的post方法

    $.post("http://127.0.0.1:5000/post2",data,function(msg){
       var l = JSON.stringify(msg)
        console.log(l);
    });

9.后端用flask接一下

@app.route('/post2', methods=['post'])
def post2():
    data = json.loads(request.form.get('data'))
    ss = data['value']
    print(data)
    return str(ss)

10.控制台打印

image.png

11.以json形式打印
flask这样写

@app.route('/tete', methods=['post'])
def post():
    data = json.loads(request.form.get('data'))
    ss = data['value']
    print(data)
    return jsonify({'ok': ss})

脚本这样写

    $.ajax({
        url:"http://127.0.0.1:5000/tete",
        type: 'post',
        data: data,
        success: function(msg){
           console.log(msg);
        }
    })

打印

image.png

注:可能会出现跨域异常，在flask中解决

@app.after_request
def cors(environ):
    environ.headers['Access-Control-Allow-Origin']='*'
    environ.headers['Access-Control-Allow-Method']='*'
    environ.headers['Access-Control-Allow-Headers']='x-requested-with,content-type'
    return environ