来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐Python Flask前后端Ajax交互的方法示例

网上澳门金莎娱乐,时间: 2019-08-31阅读: 105标签: 分页

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax

之前一直用的前端分页,在数据不是太多的情况下,前端分页还是很方便的,也可以使用自带的搜索等功能,如果数据量比较多的情况就要使用后端分页。

一、 post方法

实现的原理:前端把offset和limit(每一页显示的数量)发送给后端,后端查询数据库 返回JSON,前端根据后端返回的total展示出pagination。

1、post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件。

返回的JSON格式

(1)数据附在URL里(请求路径),发送到后端。

{ "total": 25, "rows": [ {}, {}, ... ]}
/*前端HTML<script>里:*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );

前端主要设置

其中ip,data_to_backend是在此代码前定义好的;data_to_backend一般是一个json数据(data_to_backend={'ip':$(this).parent().prev().text()}),而data是来自后端的返回数据。

sidePagination: "server",pageNumber: 1,queryParams:queryParams,
#后端py文件(路由启动前面的html的py文件)里:添加一个路由处理前端post请求
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
   print ip
   return ip +" - ip"

queryParams是一个函数,

点击按钮后的效果:

function queryParams(params) { console.log(JSON.stringify(params)) // {"order":"asc","offset":0,"limit":10} return { offset:params.offset, limit:params.limit }}

网上澳门金莎娱乐 1

完整的代码

前端定义弹窗数据

table  thead tr th data-sortable="true" data-field="id"Id/th th data-field="name"Name/th th data-sortable="true" data-field="url"Website/th th data-field="alex"Texa/th th data-field="country"Country/th /tr /thead/table

 $(function() { var url = "selectBtTable.php?action=init_data_list"; $('#tableTest1').bootstrapTable({ height: $(window).height() - 460, url: url, method: 'POST', //默认是GET方式请求 contentType: "application/x-www-form-urlencoded", search: true, pagination: true, sidePagination: "server", pageNumber: 1, queryParams: queryParams, }); });

网上澳门金莎娱乐 2

使用GET请求会把参数放在URL中发送给后端

ip在URL里

selectBtTable.php?action=init_data_listoffset=0limit=10

(2)数据单独发送给后端

如果是POST请求 一定要加上contentType: "application/x-www-form-urlencoded"

var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};  // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});

后端PHP 简单代码

后端处理程序:

?php$action = $_GET['action'];//var_dump($action);switch ($action) { case 'init_data_list': init_data_list(); break; case 'data_list': data_list(); break; case 'del_row': del_row(); break; case 'edit_row': edit_row(); break;}function init_data_list(){$offset = $_POST['offset'];//$offset = intval($offset); 可以不用转换$limit = $_POST['limit'];//var_dump($offset); //$sql = "SELECT * FROM website"; select * from clerk limit {$sql},{$pagesize}$sql = "SELECT * FROM website limit {$offset},{$limit}";// SELECT * FROM products LIMIT 0,8; // SELECT * FROM products LIMIT 8 OFFSET 0; (在mysql 5以后支持这种写法) $query = query_sql($sql); while ($row = $query-fetch_assoc()) { $data[] = $row; }$sql = "SELECT * FROM website";$query=query_sql($sql);$total=mysqli_num_rows($query);$result["total"] = $total; // count($data);$result["rows"] = $data;//$result["rows"] = array_slice($data, $offset, $limit); echo json_encode($result);}function query_sql(){ $mysqli = new mysqli("127.0.0.1", "root", "123", "demodb"); $sqls = func_get_args(); foreach ($sqls as $s) { $query = $mysqli-query($s); } $mysqli-close(); return $query;}?
@app.route('/js_call', methods=['GET', 'POST'])
def js_call():  
   print request.values['ip']  
   print request.values['text']  
   # to send the command by ssh : os.system("ssh user@host ' restart(command) ' ")  
   return 'ok!!!!'

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐Python Flask前后端Ajax交互的方法示例

关键词: