前言

??大一就用到現(xiàn)在的油猴插件，給了我好多的便利，同樣是開發(fā)前端，我只是會做一個網(wǎng)頁，人家就可以使用js腳本控制各種網(wǎng)頁以實現(xiàn)一些比較騷的操作。特別是在上網(wǎng)課的時候用到別人的插件，簡直是爽翻天了，我曾經(jīng)在使用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/<string:ss>', 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

注:可能會出現(xiàn)跨域異常，在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