Login
home
网站首页 > 文章中心 > 其它

Flask框架运用Ajax实现数据交互的示例代码

作者：小编 更新时间：2023-08-16 13:50:35 浏览量：353人看过

下面是关于"Flask框架运用Ajax实现数据交互的示例代码"的完整攻略,其中包含两个示例说明.

示例一：通过Ajax获取服务器数据

在前端页面中,使用jQuery库的$.ajax()函数向服务器发送GET请求,请求数据的URL为服务器端的接口地址,服务端返回的数据格式为JSON.


$.ajax({
type: "GET",
url: "/get_data",
success: function (data) {
    // 将返回的数据展示在页面上
}
});

在服务器端,使用Flask框架编写一个路由处理函数,接收前端发送的GET请求,并从数据库中获取数据,返回JSON格式的数据.


from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/get_data')
def get_data():
# 从数据库中获取数据
data = ...  

# 将数据转换成JSON格式
return jsonify(data)

在前端页面中,将返回的JSON数据展示在页面上,例如将数据添加到一个table表格中.


$.ajax({
type: "GET",
url: "/get_data",
success: function (data) {
    // 将返回的数据展示在页面上
    var table = $('');
    for (var i=0; i');
        var cell1 = $('
').text(data[i].name);
        var cell2 = $('').text(data[i].age);
        var cell3 = $('').text(data[i].gender);
        row.append(cell1, cell2, cell3);
        table.append(row);
    }
    $('#data_container').html(table);
}
});




示例二：通过Ajax向服务器发送数据


在前端页面中,使用jQuery库的$.ajax()函数向服务器发送POST请求,请求数据的URL为服务器端的接口地址,请求数据为表单中的数据,服务端返回的数据格式为JSON.



$('#save_button').on('click', function() {
var data = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "/save_data",
    data: data,
    dataType: "json",
    success: function (data) {
        // 处理保存成功后的逻辑
    }
});
});





在服务器端,使用Flask框架编写一个路由处理函数,接收前端发送的POST请求,并将表单数据保存到数据库中,返回JSON格式的数据.



from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/save_data', methods=['POST'])
def save_data():
# 从请求数据中获取表单数据
name = request.form.get('name')
age = request.form.get('age')
gender = request.form.get('gender')

# 将表单数据保存到数据库中
...

# 返回JSON格式的数据
return jsonify({'status': 'success', 'message': '保存成功'})





在前端页面中,处理返回的JSON数据,例如提示用户保存成功或失败的消息.



$('#save_button').on('click', function() {
var data = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "/save_data",
    data: data,
    dataType: "json",
    success: function (data) {
        if (data.status === 'success') {
            alert(data.message);
        } else {
            alert('保存失败');
        }
    }
});
});





以上就是土嘎嘎小编为大家整理的Flask框架运用Ajax实现数据交互的示例代码相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用,就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！






    		
    
		
			
				
				
   
	
    




 
      
版权声明：倡导尊重与保护知识产权。未经许可，任何人不得复制、转载、或以其他方式使用本站《原创》内容，违者将追究其法律责任。本站文章内容，部分图片来源于网络，如有侵权，请联系我们修改或者删除处理。

		

		  
			

				
相关推荐

			

			
		
   
    
  
  

    

      
编辑推荐

      
    

    

      
热门文章

      
    

  




  
 Copyright @ 2012-2025 土嘎嘎 版权所有