当前位置:首页 > PHP教程 > php高级应用 > 列表

php之接口与前端数据交互实现示例代码

发布:smiling 来源: PHP粉丝网  添加日期:2022-07-11 09:14:28 浏览: 评论:0 

最近在做前后端数据交互的尝试,也跳了很多坑,使用的是php+bootstrap-table+js,把一些收获记录在这里,方便查询。

这个小项目,仅有3个文件,分别为:

1.crud.html

2.data.php

3.crud.sql

数据交互实现1:查询

1.mysql 数据库建表

2.php查询接口

3.前端数据展现

mysql 数据库建表

数据库名称:crud

第一个表名:t_users

主键:user_id,自增长排列

php之接口与前端数据交互实现示例代码

php:

  1. <?php 
  2.  
  3.   //测试php是否可以拿到数据库中的数据 
  4.  
  5.   /*echo "44444";*/ 
  6.  
  7.     
  8.  
  9.   //做个路由 action为url中的参数 
  10.  
  11.   $action = $_GET['action']; 
  12.  
  13.  
  14.  
  15.   switch($action) { 
  16.  
  17.     case 'init_data_list'
  18.  
  19.       init_data_list(); 
  20.  
  21.       break
  22.  
  23.     case 'add_row'
  24.  
  25.       add_row(); 
  26.  
  27.       break
  28.  
  29.     case 'del_row'
  30.  
  31.       del_row(); 
  32.  
  33.       break
  34.  
  35.     case 'edit_row'
  36.  
  37.       edit_row(); 
  38.  
  39.       break
  40.  
  41.   } 
  42.  
  43.     
  44.  
  45.   //查询方法 
  46.  
  47.   function init_data_list(){ 
  48.  
  49.     //测试 运行crud.html时是否可以获取到 下面这个字符串 
  50.  
  51.     /*echo "46545465465456465";*/ 
  52.  
  53.       
  54.  
  55.     //查询表 
  56.  
  57.     $sql = "SELECT * FROM `t_users`"
  58.  
  59.     $query = query_sql($sql); 
  60.  
  61.     while($row = $query->fetch_assoc()){ 
  62.  
  63.       $data[] = $row
  64.  
  65.     } 
  66.  
  67.       
  68.  
  69.     $json = json_encode(array
  70.  
  71.       "resultCode"=>200, 
  72.  
  73.       "message"=>"查询成功!"
  74.  
  75.       "data"=>$data 
  76.  
  77.     ),JSON_UNESCAPED_UNICODE); 
  78.  
  79.       
  80.  
  81.     //转换成字符串JSON 
  82.  
  83.     echo($json); 
  84.  
  85.   } 
  86.  
  87.     
  88.  
  89.     
  90.  
  91.   /**查询服务器中的数据 
  92.  
  93.    * 1、连接数据库,参数分别为 服务器地址 / 用户名 / 密码 / 数据库名称 
  94.  
  95.    * 2、返回一个包含参数列表的数组 
  96.  
  97.    * 3、遍历$sqls这个数组,并把返回的值赋值给 $s 
  98.  
  99.    * 4、执行一条mysql的查询语句 
  100.  
  101.    * 5、关闭数据库 
  102.  
  103.    * 6、返回执行后的数据 
  104.  
  105.    */ 
  106.  
  107.   function query_sql(){ 
  108.  
  109.     $mysqli = new mysqli("127.0.0.1""root""root""crud"); 
  110.  
  111.     $sqls = func_get_args(); 
  112.  
  113.     foreach($sqls as $s){ 
  114.  
  115.       $query = $mysqli->query($s); 
  116.  
  117.     } 
  118.  
  119.     $mysqli->close(); 
  120.  
  121.     return $query
  122.  
  123.   } 
  124.  
  125. ?> 

前端实现:

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5.  
  6.  
  7.   <head> 
  8.  
  9.     <meta charset="UTF-8"> 
  10.  
  11.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  12.  
  13.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  14.  
  15.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 
  16.  
  17.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  18.  
  19.     <!-- Latest compiled and minified CSS --> 
  20.  
  21.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="external nofollow" > 
  22.  
  23.     <!-- jQuery --> 
  24.  
  25.     <script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script> 
  26.  
  27.     <script type="text/javascript" src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script> 
  28.  
  29.     <!-- bootstrap-table --> 
  30.  
  31.     <link rel="stylesheet" href="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.css" rel="external nofollow" > 
  32.  
  33.     <script type="text/javascript" src="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.js"></script> 
  34.  
  35.     <style type="text/css"> 
  36.  
  37.       #table { 
  38.  
  39.         padding: 0; 
  40.  
  41.       } 
  42.  
  43.         
  44.  
  45.       #table>tbody>tr { 
  46.  
  47.         cursor: pointer; 
  48.  
  49.       } 
  50.  
  51.         
  52.  
  53.       #table>tbody>tr>td.bs-checkbox { 
  54.  
  55.         vertical-align: middle; 
  56.  
  57.       } 
  58.  
  59.     </style> 
  60.  
  61.     <title>增删改查</title> 
  62.  
  63.   </head> 
  64.  
  65.  
  66.  
  67.   <body style="padding: 50px;"> 
  68.  
  69.     <p class="toolbar1" style="margin-bottom: -43px;"> 
  70.  
  71.       <button id="remove" class="btn btn-danger" disabled>删除</button> 
  72.  
  73.       <button class="btn btn-primary" id="btn">新建</button> 
  74.  
  75.     </p> 
  76.  
  77.     <p id="table"></p> 
  78.  
  79.  
  80.  
  81.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
  82.  
  83.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
  84.  
  85.     <!-- Latest compiled and minified JavaScript --> 
  86.  
  87.     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
  88.  
  89.     <!-- Latest compiled and minified Locales --> 
  90.  
  91.     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> 
  92.  
  93.     <script type="text/javascript"> 
  94.  
  95.       var $table = $('#table'), 
  96.  
  97.         $remove = $('#remove'); 
  98.  
  99.  
  100.  
  101.       $(function() { 
  102.  
  103.         searchData(); 
  104.  
  105.       }); 
  106.  
  107.  
  108.  
  109.       function prepareDisplayData(data) { 
  110.  
  111.         return { 
  112.  
  113.           total: data.data.length, 
  114.  
  115.           fixedScroll: false, 
  116.  
  117.           rows: data.data 
  118.  
  119.         }; 
  120.  
  121.       } 
  122.  
  123.  
  124.  
  125.       function searchData() { 
  126.  
  127.         var search_url = "./php/data.php"
  128.  
  129.  
  130.  
  131.         //url 中问号后面的参数 action,这个对象就是查询的参数 
  132.  
  133.         var dataParam = { 
  134.  
  135.           action: "init_data_list" 
  136.  
  137.         }; 
  138.  
  139.  
  140.  
  141.         $.ajax({ 
  142.  
  143.           type: "get", 
  144.  
  145.           url: search_url, 
  146.  
  147.           data: dataParam, 
  148.  
  149.           dataType: 'json', 
  150.  
  151.           contentType: 'application/json; charset=utf-8', 
  152.  
  153.           success: function(data) { 
  154.  
  155.             //测试是否可以拿到php中的数据 
  156.  
  157.             console.log(data); 
  158.  
  159.             //遍历这个数组 
  160.  
  161.             if(data.resultCode == 200) { 
  162.  
  163.               var itemArr = data.data; 
  164.  
  165.               for(var i = 0; i < itemArr.length; i++) { 
  166.  
  167.                 var item = itemArr[i]; 
  168.  
  169.                 console.log(item); 
  170.  
  171.               } 
  172.  
  173.             } 
  174.  
  175.  
  176.  
  177.             //bootstrap-table 组织数据 
  178.  
  179.             var displayData = prepareDisplayData(data); 
  180.  
  181.             if(displayData.total > 0) { 
  182.  
  183.               $('#table').bootstrapTable('load', displayData); 
  184.  
  185.             } else { 
  186.  
  187.               console.log("last page or empty."); 
  188.  
  189.             } 
  190.  
  191.           }, 
  192.  
  193.           error: function(data) { 
  194.  
  195.             alert('服务器出错'); 
  196.  
  197.           }, 
  198.  
  199.         }); 
  200.  
  201.       } 
  202.  
  203.  
  204.  
  205.       $('#table').bootstrapTable({ 
  206.  
  207.         pagination: true, 
  208.  
  209.         sidePagination: 'server', //设置为服务器端分页 
  210.  
  211.         pageNumber: 1, 
  212.  
  213.         pageSize: 10, 
  214.  
  215.         pageList: [10, 20, 50, 100], 
  216.  
  217.         search: true, 
  218.  
  219.         showColumns: true, 
  220.  
  221.         showRefresh: true, 
  222.  
  223.         columns: [{ 
  224.  
  225.           field: 'state', 
  226.  
  227.           checkbox: true, 
  228.  
  229.         }, { 
  230.  
  231.           field: 'user_id', 
  232.  
  233.           title: '用户Id', 
  234.  
  235.           width: '50', 
  236.  
  237.           align: 'center', 
  238.  
  239.           valign: 'middle' 
  240.  
  241.         }, { 
  242.  
  243.           field: 'user_name', 
  244.  
  245.           title: '用户名称', 
  246.  
  247.           width: '500', 
  248.  
  249.           align: 'center', 
  250.  
  251.           valign: 'middle' 
  252.  
  253.         }, { 
  254.  
  255.           field: 'user_age', 
  256.  
  257.           title: '用户年龄', 
  258.  
  259.           width: '500', 
  260.  
  261.           align: 'center', 
  262.  
  263.           valign: 'middle' 
  264.  
  265.         }, { 
  266.  
  267.           field: 'user_sex', 
  268.  
  269.           title: '用户性别', 
  270.  
  271.           width: '500', 
  272.  
  273.           align: 'center', 
  274.  
  275.           valign: 'middle' 
  276.  
  277.         }, { 
  278.  
  279.           field: 'user_add', 
  280.  
  281.           title: '编辑', 
  282.  
  283.           formatter: forwardFormatter, 
  284.  
  285.           width: '500', 
  286.  
  287.           align: 'center', 
  288.  
  289.           valign: 'middle' 
  290.  
  291.         }] 
  292.  
  293.       }).on('page-change.bs.table', function(e, page, size) { 
  294.  
  295.         fillData(); 
  296.  
  297.       }).on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() { 
  298.  
  299.         var tes = !$table.bootstrapTable('getSelections').length 
  300.  
  301.         $remove.prop('disabled', !$table.bootstrapTable('getSelections').length); 
  302.  
  303.       }); 
  304.  
  305.  
  306.  
  307.         
  308.  
  309.       function forwardFormatter(value, row, index) { 
  310.  
  311.         var value = "修改"
  312.  
  313.         return "<a href='#/" + row.user_id + "' class='btn btn-link'>" + value + "</a>"; 
  314.  
  315.       } 
  316.  
  317.     </script> 
  318.  
  319.   </body> 
  320.  
  321. </html> 
实现效果:

php之接口与前端数据交互实现示例代码

数据交互实现2:删除

在做删除时遇到不少的坑,究其原因是因为对SQL语句不熟悉,对php不熟悉,不过,总结了以下几点,供参考:

1.delete 返回的参数只能用 $_GET 获取;

2.delete 返回的参数要放在URL中,不能放在body中;body中的参数是用来查询的;

3.SQL语句一定要熟练,一步错,步步错;

4.要在数据库中执行SQL语句检查语句是否执行正确,要使用 Rest Client 测试URL请求是否正确;

php:

  1. <?php 
  2.  
  3.   //测试php是否可以拿到数据库中的数据 
  4.  
  5.   /*echo "44444";*/ 
  6.  
  7.     
  8.  
  9.   //做个路由 action为url中的参数 
  10.  
  11.   $action = $_GET['action']; 
  12.  
  13.  
  14.  
  15.   switch($action) { 
  16.  
  17.     case 'init_data_list'
  18.  
  19.       init_data_list(); 
  20.  
  21.       break
  22.  
  23.     case 'add_row'
  24.  
  25.       add_row(); 
  26.  
  27.       break
  28.  
  29.     case 'del_row'
  30.  
  31.       del_row(); 
  32.  
  33.       break
  34.  
  35.     case 'edit_row'
  36.  
  37.       edit_row(); 
  38.  
  39.       break
  40.  
  41.   } 
  42.  
  43.  
  44.  
  45. //删除方法 
  46.  
  47.   function del_row(){ 
  48.  
  49.     //测试 
  50.  
  51.     /*echo "ok!";*/ 
  52.  
  53.       
  54.  
  55.     //接收传回的参数 
  56.  
  57.     $rowId = $_GET['rowId']; 
  58.  
  59.     $sql = "delete from t_users where user_id='$rowId'"
  60.  
  61.       
  62.  
  63.     if(query_sql($sql)){ 
  64.  
  65.       echo "ok!"
  66.  
  67.     }else
  68.  
  69.       echo "删除失败!"
  70.  
  71.     } 
  72.  
  73.   } 
  74.  
  75. ?> 

前端实现JS部分:

  1. var $table = $('#table'), 
  2.  
  3.   $remove = $('#remove'); 
  4.  
  5.  
  6.  
  7.   $(function() { 
  8.  
  9.     delData(); 
  10.  
  11.   }); 
  12.  
  13.  
  14.  
  15. function delData() { 
  16.  
  17.         $remove.on('click'function() { 
  18.  
  19.           if(confirm("是否继续删除")) { 
  20.  
  21.             var rows = $.map($table.bootstrapTable('getSelections'), function(row) { 
  22.  
  23.               //返回选中的行的索引号 
  24.  
  25.               return row.user_id; 
  26.  
  27.             }); 
  28.  
  29.           } 
  30.  
  31.             
  32.  
  33.           $.map($table.bootstrapTable('getSelections'),function(row){ 
  34.  
  35.             var del_url = "./php/data.php"
  36.  
  37.             //根据userId删除数据,因为这个id就是 传给服务器的参数 
  38.  
  39.             var rowId = row.user_id; 
  40.  
  41.               
  42.  
  43.             $.ajax({ 
  44.  
  45.               type:"delete"
  46.  
  47.               url:del_url + "?action=del_row&rowId=" + rowId, 
  48.  
  49.               dataType:"html"
  50.  
  51.               contentType: 'application/json;charset=utf-8'
  52.  
  53.               success: function(data) { 
  54.  
  55.                 $table.bootstrapTable('remove',{ 
  56.  
  57.                   field: 'user_id'
  58.  
  59.                   values: rows 
  60.  
  61.                 }); 
  62.  
  63.                 $remove.prop('disabled'true); 
  64.  
  65.               }, 
  66.  
  67.               error:function(data){ 
  68.  
  69.                 alert('删除失败!'); 
  70.  
  71.               } 
  72.  
  73.             }); 
  74.  
  75.           }); 
  76.  
  77.         }) 
  78.  
  79.       } 

调试方法:

php之接口与前端数据交互实现示例代码

php之接口与前端数据交互实现示例代码

php之接口与前端数据交互实现示例代码

数据交互实现3:新增

在写php的方法上,我觉得我的方法是有问题的,因为所有的参数,也就是所有的需要新增的数据都是通过 接口以 ? 后跟参数的方式添加成功的。功能是可以实现,但是如果新增的数据较大,这个方法显示是不可行的,但是还没有找到合适的方法,烦请大侠们指点。

php:

  1. <?php 
  2.  
  3.   //测试php是否可以拿到数据库中的数据 
  4.  
  5.   /*echo "44444";*/ 
  6.  
  7.     
  8.  
  9.   //做个路由 action为url中的参数 
  10.  
  11.   $action = $_GET['action']; 
  12.  
  13.  
  14.  
  15.   switch($action) { 
  16.  
  17.     case 'init_data_list'
  18.  
  19.       init_data_list(); 
  20.  
  21.       break
  22.  
  23.     case 'add_row'
  24.  
  25.       add_row(); 
  26.  
  27.       break
  28.  
  29.     case 'del_row'
  30.  
  31.       del_row(); 
  32.  
  33.       break
  34.  
  35.     case 'edit_row'
  36.  
  37.       edit_row(); 
  38.  
  39.       break
  40.  
  41.   } 
  42.  
  43.  
  44.  
  45. //新增方法 
  46.  
  47.   function add_row(){ 
  48.  
  49.     /*获取从客户端传过来的数据*/ 
  50.  
  51.     $userName = $_GET['user_name']; 
  52.  
  53.     $userAge = $_GET['user_age']; 
  54.  
  55.     $userSex = $_GET['user_sex']; 
  56.  
  57.     //INSERT INTO 表名 (列名1,列名2,...)VALUES ('对应的数据1','对应的数据2',...) 
  58.  
  59.     // VALUES 的值全为字符串,因为表属性设置为字符串 
  60.  
  61.     $sql = "INSERT INTO t_users (user_name,user_age,user_sex) VALUES ('$userName','$userAge','$userSex')"
  62.  
  63.     if(query_sql($sql)){ 
  64.  
  65.       echo "ok!"
  66.  
  67.     }else
  68.  
  69.       echo "新增成功!"
  70.  
  71.     } 
  72.  
  73.   } 
  74.  
  75.  
  76.  
  77.   function query_sql(){ 
  78.  
  79.     $mysqli = new mysqli("127.0.0.1""root""root""crud"); 
  80.  
  81.     $sqls = func_get_args(); 
  82.  
  83.     foreach($sqls as $s){ 
  84.  
  85.       $query = $mysqli->query($s); 
  86.  
  87.     } 
  88.  
  89.     $mysqli->close(); 
  90.  
  91.     return $query
  92.  
  93.   } 
  94.  
  95. ?> 

前端实现JS部分:

html使用了bootstrap 的 modal作为新增时的弹出框

  1. <!--新增弹框--> 
  2.  
  3.     <p class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  4.  
  5.       <p class="modal-dialog" role="document"
  6.  
  7.         <p class="modal-content"
  8.  
  9.           <p class="modal-header"
  10.  
  11.             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
  12.  
  13.             <h4 class="modal-title" id="exampleModalLabel">用户新增</h4> 
  14.  
  15.           </p> 
  16.  
  17.           <p class="modal-body"
  18.  
  19.             <form id="listForm" method="post"
  20.  
  21.               <p class="form-group"
  22.  
  23.                 <label for="userName" class="control-label">用户名称</label> 
  24.  
  25.                 <input type="text" class="form-control" id="userName"
  26.  
  27.               </p> 
  28.  
  29.               <p class="form-group"
  30.  
  31.                 <label for="userAge" class="control-label">用户年龄</label> 
  32.  
  33.                 <input type="text" class="form-control" id="userAge"
  34.  
  35.               </p> 
  36.  
  37.               <p class="form-group"
  38.  
  39.                 <label class="control-label" for="user-sex">用户性别</label> 
  40.  
  41.                 <p class=""
  42.  
  43.                   <select id="user-sex" class="form-control" name="user-sex" style="width: 100%" > 
  44.  
  45.                     <option value='-1'>请选择</option> 
  46.  
  47.                     <option value='0'>男</option> 
  48.  
  49.                     <option value='1'>女</option> 
  50.  
  51.                   </select> 
  52.  
  53.                 </p> 
  54.  
  55.               </p> 
  56.  
  57.             </form> 
  58.  
  59.           </p> 
  60.  
  61.           <p class="modal-footer"
  62.  
  63.             <button id="close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
  64.  
  65.             <button id="save" type="button" class="btn btn-primary">保存</button> 
  66.  
  67.           </p> 
  68.  
  69.         </p> 
  70.  
  71.       </p> 
  72.  
  73.     </p> 
  74.  
  75.  
  76. var $table = $('#table'), 
  77.  
  78.    $remove = $('#remove'); 
  79.  
  80.  
  81.  
  82.   $(function() { 
  83.  
  84.       searchData(); 
  85.  
  86.     delData(); 
  87.  
  88.           
  89.  
  90.     $('#save').click(function(){ 
  91.  
  92.       addData(); 
  93.  
  94.     }); 
  95.  
  96.   });  
  97.  
  98. function addData(){ 
  99.  
  100.         var userName = $('#userName').val(); 
  101.  
  102.         var userAge = $("#userAge").val(); 
  103.  
  104.         var userSex = $('#user-sex').val() == '0' ? '男' : '女'
  105.  
  106.           
  107.  
  108.         var addUrl = "./php/data.php?action=add_row&user_name=" + userName + "&user_age=" + userAge + "&user_sex=" + userSex; 
  109.  
  110.           
  111.  
  112.         $.ajax({ 
  113.  
  114.           type:"post"
  115.  
  116.           url:addUrl, 
  117.  
  118.           dataType:'json'
  119.  
  120.           contentType:'application/json;charset=utf-8'
  121.  
  122.           success:function(data){ 
  123.  
  124.             console.log("success"); 
  125.  
  126.           }, 
  127.  
  128.           error:function(data){ 
  129.  
  130.             console.log("data"); 
  131.  
  132.             //添加成功后隐蒧modal框 
  133.  
  134.             setTimeout(function(){ 
  135.  
  136.               $('#exampleModal').modal('hide'); 
  137.  
  138.             },500); 
  139.  
  140.               //隐藏modal框后重新加载当前页 
  141.  
  142.             setTimeout(function(){ 
  143.  
  144.               searchData(); 
  145.  
  146.             },700); 
  147.  
  148.           } 
  149.  
  150.         }); 
  151.  
  152.       } 

至此,还没有解决如下问题:

1.表单验证;

2.添加多条数据后,php如何接收参数;

3.新增成功后,在$.ajax的方法中,为什么,新增成功后的其它操作要在 error 这个对象中实现?而不是在 sucess 中实现?

Tags: php接口 php前端数据交互

分享到: