前言
大一就用到现在的油猴插件，给了我好多的便利，同样是开发前端，我只是会做一个网页，人家就可以使用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/<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
注:可能会出现跨域异常，在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
