flask项目 ajax与后台互动

最新推荐文章于 2024-05-14 09:45:29 发布

thindi

最新推荐文章于 2024-05-14 09:45:29 发布

阅读量355

点赞数

分类专栏： flask 文章标签： flask ajax

本文链接：https://blog.csdn.net/thindi/article/details/88078141

版权

flask 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手上有个flask项目，需要前后台数据交换，考虑到效率问题，ajax协议很不错。现在将一些简单的方法供大家参考

1.首先解决textare 标签的使用，如何提取，如何将提取的值给另外一个文本域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
		<script>
			$(function () {
                bt=$("#b1");
			    a=$("#t1");
			    b=$("#t2");
			    bt.click(function(){
			        b.val(a.val());
			})
            })
		</script>
	</head>
	<body>
		<textarea id="t1" rows="5" cols="100"   class="propel">678</textarea>
		<button id='b1'>提取</button>
		<textarea id="t2" rows="5" cols="100"   class="propel"></textarea>
	</body>
</html>

2.通过ajax方式交互数据

这个是后台路由

@app.route('/dataFromAjax')
def dataFromAjax():
    test = request.args.get('mydata')
    print(test)
    return '我是后台数据'

这个是前端

	    $(".btn6_2").click(function(){
		$.ajax({url:"/dataFromAjax", data:{"mydata": "我是前端ajax"},success:function(data){
			alert(data);
		}});




        <button class="btn6_2">ajax发送字符回后台</button>

点击按钮后跳出

3.前端数据给后台处理后返回前端

这是后端

@app.route('/m_string',methods=['get','post'])
def mystring():
    yourName= request.form['yourName']
    print(yourName)
    st='我来自后台'+yourName
    print(st)
    return jsonify(st)

这是前端

    $(".btn4").click(function(){
        var yourName= $("#yourName").val();
        $.post("/m_string", {"yourName": yourName}, function(data, status){
			alert("st:"+data);
			$("#t2").val(data);
        });
	});

    <button class="btn4">显示字符</button>
    <textarea id="t2" rows="5" cols="100"   class="propel"></textarea>

<form action="/myform" method='post'>
<input type="text" name="yourName" value="" id="yourName"><br>
</form>

thindi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flask项目 ajax与后台互动

手上有个flask项目，需要前后台数据交换，考虑到效率问题，ajax协议很不错。现在将一些简单的方法供大家参考1.首先解决textare 标签的使用，如何提取，如何将提取的值给另外一个文本域。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试...
复制链接

扫一扫