ajax与html 表格交互,Flask使用ajax进行前后端交互

ajax前后端交互的使用已经非常普及了， 这种数据交互方式比表单提交数据带给用户的使用体验更好一些。同时，利用ajax交互时数据传输一般使用json，我们可以很方便的管理我们所需要的数据。只需要定义好数据格式，可以前后端分离开发。

我们这里改一下之前图片上传的代码，使用ajax方式上传图片。

html表单：

选择照片

上传照片

手动裁剪

Js代码：

function ajaxForm(){

var form= new FormData(document.getElementById("test_form"));

$.ajax({

url:"{{ url_for('api_upload') }}",

type:"post",

data:form,

dataType: 'json',

processData:false,

contentType:false,

success:function(data){

$(img_url_new).attr("src",data.img_url_new);

$(imgPic).attr("src",data.img_url_new);

},

error:function(e){

alert("error");

}

})

}

注意，需要引入jquery。

data为获取的表单数据，以json格式通过post方法传入后台，成功后从后台获取数据data，失败则弹出error。

后台接收代码：

@app.route('/up_photo', methods=['POST'], strict_slashes=False)

def api_upload():

file_dir = os.path.join(basedir, app.config['UPLOAD_FOLDER'])

if not os.path.exists(file_dir):

os.makedirs(file_dir)

f = request.files['photo']

if f and allowed_file(f.filename):

fname = secure_filename(f.filename)

ext = fname.rsplit('.', 1)[1]

new_filename = Pic_str().create_uuid() + '.' + ext

print new_filename

f.save(os.path.join(file_dir, new_filename))

img_url = ip+'show/'+new_filename

img_url_new = ip+'show/'+new_filename #处理后的图片，假数据

return jsonify({"success": 200, "msg": "上传成功", "img_url": img_url, "img_url_new": img_url_new})

else:

return jsonify({"error": 1001, "msg": "上传失败"})

通过上传图片的小例子我们大概了解了Flask使用ajax交互的基本方式，下面通过一个更加符合ajax使用场景的例子来加深理解它。

如，有这样一个场景，我们希望鼠标点击图片时将点击坐标传入后台，这时就必须使用ajax来实现了。

html页面代码：

点击选择裁剪坐标

X: Y:

×

js代码：

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mousePosition(ev);

document.getElementById('xxx').value = mousePos.x;

document.getElementById('yyy').value = mousePos.y;

}

document.onmousemove = mouseMove;

function Show(el){

var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;

var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;

var data= {

data: JSON.stringify({

'x': x,

'y': y

}),

}

$.ajax({

url:"{{ url_for('img_operate') }}",

type:"post",

data:data,

dataType: 'json',

success:function(data){

//成功后的一些操作

},

error:function(e){

alert("error");

}

})

}

注意，我们这里通过json格式将数据传入后台：

var data= {

data: JSON.stringify({

'x': x,

'y': y

}),

}

那么后台如何接收x、y轴坐标呢？

data = json.loads(request.form.get('data'))

x = data['x']

y = data['y']

以上为接收ajax前台传入数据的方法，后台路由方法完整代码：

# 坐标操作图片处理的按钮路由

@app.route('/img_operate', methods=['POST'])

def img_operate():

data = json.loads(request.form.get('data'))

x = data['x']

y = data['y']

print(x)

print(y)

img = 'http://localhost:5000/static/img/1.jpg'

return jsonify({"success": 200, "img": img, "x": x, "y": y})

以上这些介绍了ajax前后台交互的基本方法。