后端开发|php教程
php,接口,前后端数据,交互
后端开发-php教程
多标签浏览器源码,zynq怎么装ubuntu,tomcat线程池的文件,爬虫面试岗位,vue和php优势,西青区一站式seo服务诚信经营lzw
最近在做前后端数据交互的尝试，也跳了很多坑，使用的是php+bootstrap-table+js，把一些收获记录在这里，方便查询。
激活码授权平台源码,vscode如何缩放屏幕,ubuntu驱动实验,tomcat各版本下载,爬虫select,php acid,seo推广营销平台广告,防下载网站源码,导航模板源码下载lzw
这个小项目，仅有3个文件，分别为：
牛杂网 源码,硬盘gpt安装ubuntu,爬虫如何执行js,php重复,seo新人网站lzw
1.crud.html
2.data.php
3.crud.sql
数据交互实现1：查询
1.mysql 数据库建表
2.php查询接口
3.前端数据展现
mysql 数据库建表
数据库名称：crud第一个表名：t_users主键：user_id，自增长排列
php:
fetch_assoc()){$data[] = $row; } $json = json_encode(array("resultCode"=>200,"message"=>"查询成功！","data"=>$data ),JSON_UNESCAPED_UNICODE); //转换成字符串JSON echo($json); }/**查询服务器中的数据 * 1、连接数据库,参数分别为 服务器地址 / 用户名 / 密码 / 数据库名称 * 2、返回一个包含参数列表的数组 * 3、遍历$sqls这个数组，并把返回的值赋值给 $s * 4、执行一条mysql的查询语句 * 5、关闭数据库 * 6、返回执行后的数据 */ function query_sql(){ $mysqli = new mysqli("127.0.0.1", "root", "root", "crud"); $sqls = func_get_args(); foreach($sqls as $s){$query = $mysqli->query($s); } $mysqli->close(); return $query; }?>
前端实现：
#table { padding: 0;} #table>tbody>tr { cursor: pointer;} #table>tbody>tr>td.bs-checkbox { vertical-align: middle;}
var $table = $(#table), $remove = $(#remove);$(function() { searchData();});function prepareDisplayData(data) { return {total: data.data.length,fixedScroll: false,rows: data.data };}function searchData() { var search_url = "./php/data.php"; //url 中问号后面的参数 action，这个对象就是查询的参数 var dataParam = {action: "init_data_list" }; $.ajax({type: "get",url: search_url,data: dataParam,dataType: json,contentType: application/json; charset=utf-8,success: function(data) { //测试是否可以拿到php中的数据 console.log(data); //遍历这个数组 if(data.resultCode == 200) { var itemArr = data.data; for(var i = 0; i 0) { $(#table).bootstrapTable(load, displayData); } else { console.log("last page or empty."); }},error: function(data) { alert(服务器出错);}, });}$(#table).bootstrapTable({ pagination: true, sidePagination: server, //设置为服务器端分页 pageNumber: 1, pageSize: 10, pageList: [10, 20, 50, 100], search: true, showColumns: true, showRefresh: true, columns: [{field: state,checkbox: true, }, {field: user_id,title: 用户Id,width: 50,align: center,valign: middle }, {field: user_name,title: 用户名称,width: 500,align: center,valign: middle }, {field: user_age,title: 用户年龄,width: 500,align: center,valign: middle }, {field: user_sex,title: 用户性别,width: 500,align: center,valign: middle }, {field: user_add,title: 编辑,formatter: forwardFormatter,width: 500,align: center,valign: middle }]}).on(page-change.bs.table, function(e, page, size) { fillData();}).on(check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table, function() { var tes = !$table.bootstrapTable(getSelections).length $remove.prop(disabled, !$table.bootstrapTable(getSelections).length);}); function forwardFormatter(value, row, index) { var value = "修改"; return "" + value + "";}
实现效果：
数据交互实现2：删除
在做删除时遇到不少的坑，究其原因是因为对SQL语句不熟悉，对php不熟悉，不过，总结了以下几点，供参考：
1.delete 返回的参数只能用 $_GET 获取；
2.delete 返回的参数要放在URL中，不能放在body中；body中的参数是用来查询的；
3.SQL语句一定要熟练，一步错，步步错；
4.要在数据库中执行SQL语句检查语句是否执行正确，要使用 Rest Client 测试URL请求是否正确；
php:
前端实现JS部分：
var $table = $(#table), $remove = $(#remove); $(function() { delData(); });function delData() { $remove.on(click, function() {if(confirm("是否继续删除")) { var rows = $.map($table.bootstrapTable(getSelections), function(row) { //返回选中的行的索引号 return row.user_id; });}$.map($table.bootstrapTable(getSelections),function(row){ var del_url = "./php/data.php"; //根据userId删除数据,因为这个id就是 传给服务器的参数 var rowId = row.user_id; $.ajax({ type:"delete", url:del_url + "?action=del_row&rowId=" + rowId, dataType:"html", contentType: application/json;charset=utf-8, success: function(data) {$table.bootstrapTable( emove,{ field: user_id, values: rows});$remove.prop(disabled, true); }, error:function(data){alert(删除失败！); } });}); })}
调试方法：
数据交互实现3：新增
在写php的方法上，我觉得我的方法是有问题的，因为所有的参数，也就是所有的需要新增的数据都是通过 接口以 ？ 后跟参数的方式添加成功的。功能是可以实现，但是如果新增的数据较大，这个方法显示是不可行的，但是还没有找到合适的方法，烦请大侠们指点。
php:
query($s); } $mysqli->close(); return $query; }?>
前端实现JS部分：
html使用了bootstrap 的 modal作为新增时的弹出框
用户新增
请选择 男 女
var $table = $(#table), $remove = $(#remove); $(function() {searchData(); delData(); $(#save).click(function(){addData(); }); }); function addData(){ var userName = $(#userName).val(); var userAge = $("#userAge").val(); var userSex = $(#user-sex).val() == ? 男 : 女;var addUrl = "./php/data.php?action=add_row&user_name=" + userName + "&user_age=" + userAge + "&user_sex=" + userSex;$.ajax({type:"post",url:addUrl,dataType:json,contentType:application/json;charset=utf-8,success:function(data){ console.log("success");},error:function(data){ console.log("data"); //添加成功后隐蒧modal框 setTimeout(function(){ $(#exampleModal).modal(hide); },500);//隐藏modal框后重新加载当前页 setTimeout(function(){ searchData(); },700);} });}
至此，还没有解决如下问题：
1.表单验证；
2.添加多条数据后，php如何接收参数；
3.新增成功后，在$.ajax的方法中，为什么，新增成功后的其它操作要在 error 这个对象中实现？而不是在 sucess 中实现？
