搜索
首页后端开发php教程php之接口与前端数据交互实现示例代码

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

coldplay.xixi
coldplay.xixi
Jul 16, 2020 pm 05:52 PM
php交互接口

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

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

这个小项目，仅有3个文件，分别为：

1.crud.html
2.data.php
3.crud.sql

相关学习推荐：PHP编程从入门到精通

数据交互实现1：查询

1.mysql 数据库建表
2.php查询接口
3.前端数据展现

mysql 数据库建表

  • 数据库名称：crud
  • 第一个表名：t_users
  • 主键：user_id，自增长排列

php:

<?php
  //测试php是否可以拿到数据库中的数据
  /*echo "44444";*/
  
  //做个路由 action为url中的参数
  $action = $_GET[&#39;action&#39;];

  switch($action) {
    case &#39;init_data_list&#39;:
      init_data_list();
      break;
    case &#39;add_row&#39;:
      add_row();
      break;
    case &#39;del_row&#39;:
      del_row();
      break;
    case &#39;edit_row&#39;:
      edit_row();
      break;
  }
  
  //查询方法
  function init_data_list(){
    //测试 运行crud.html时是否可以获取到 下面这个字符串
    /*echo "46545465465456465";*/
    
    //查询表
    $sql = "SELECT * FROM `t_users`";
    $query = query_sql($sql);
    while($row = $query->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;
  }
?>

前端实现：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="external nofollow" >
    <!-- jQuery -->
    <script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.css" rel="external nofollow" >
    <script type="text/javascript" src="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.js"></script>
    <style type="text/css">
      #table {
        padding: 0;
      }
      
      #table>tbody>tr {
        cursor: pointer;
      }
      
      #table>tbody>tr>td.bs-checkbox {
        vertical-align: middle;
      }
    </style>
    <title>增删改查</title>
  </head>

  <body style="padding: 50px;">
    <p class="toolbar1" style="margin-bottom: -43px;">
      <button id="remove" class="btn btn-danger" disabled>删除</button>
      <button class="btn btn-primary" id="btn">新建</button>
    </p>
    <p id="table"></p>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
      var $table = $(&#39;#table&#39;),
        $remove = $(&#39;#remove&#39;);

      $(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: &#39;json&#39;,
          contentType: &#39;application/json; charset=utf-8&#39;,
          success: function(data) {
            //测试是否可以拿到php中的数据
            console.log(data);
            //遍历这个数组
            if(data.resultCode == 200) {
              var itemArr = data.data;
              for(var i = 0; i < itemArr.length; i++) {
                var item = itemArr[i];
                console.log(item);
              }
            }

            //bootstrap-table 组织数据
            var displayData = prepareDisplayData(data);
            if(displayData.total > 0) {
              $(&#39;#table&#39;).bootstrapTable(&#39;load&#39;, displayData);
            } else {
              console.log("last page or empty.");
            }
          },
          error: function(data) {
            alert(&#39;服务器出错&#39;);
          },
        });
      }

      $(&#39;#table&#39;).bootstrapTable({
        pagination: true,
        sidePagination: &#39;server&#39;, //设置为服务器端分页
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 20, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        columns: [{
          field: &#39;state&#39;,
          checkbox: true,
        }, {
          field: &#39;user_id&#39;,
          title: &#39;用户Id&#39;,
          width: &#39;50&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;
        }, {
          field: &#39;user_name&#39;,
          title: &#39;用户名称&#39;,
          width: &#39;500&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;
        }, {
          field: &#39;user_age&#39;,
          title: &#39;用户年龄&#39;,
          width: &#39;500&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;
        }, {
          field: &#39;user_sex&#39;,
          title: &#39;用户性别&#39;,
          width: &#39;500&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;
        }, {
          field: &#39;user_add&#39;,
          title: &#39;编辑&#39;,
          formatter: forwardFormatter,
          width: &#39;500&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;
        }]
      }).on(&#39;page-change.bs.table&#39;, function(e, page, size) {
        fillData();
      }).on(&#39;check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table&#39;, function() {
        var tes = !$table.bootstrapTable(&#39;getSelections&#39;).length
        $remove.prop(&#39;disabled&#39;, !$table.bootstrapTable(&#39;getSelections&#39;).length);
      });

      
      function forwardFormatter(value, row, index) {
        var value = "修改";
        return "<a href=&#39;#/" + row.user_id + "&#39; class=&#39;btn btn-link&#39;>" + value + "</a>";
      }
    </script>
  </body>
</html>

实现效果：

数据交互实现2：删除

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

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

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

3.SQL语句一定要熟练，一步错，步步错；

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

php:

<?php
  //测试php是否可以拿到数据库中的数据
  /*echo "44444";*/
  
  //做个路由 action为url中的参数
  $action = $_GET[&#39;action&#39;];

  switch($action) {
    case &#39;init_data_list&#39;:
      init_data_list();
      break;
    case &#39;add_row&#39;:
      add_row();
      break;
    case &#39;del_row&#39;:
      del_row();
      break;
    case &#39;edit_row&#39;:
      edit_row();
      break;
  }

//删除方法
  function del_row(){
    //测试
    /*echo "ok!";*/
    
    //接收传回的参数
    $rowId = $_GET[&#39;rowId&#39;];
    $sql = "delete from t_users where user_id=&#39;$rowId&#39;";
    
    if(query_sql($sql)){
      echo "ok!";
    }else{
      echo "删除失败！";
    }
  }
?>

前端实现JS部分：

var $table = $(&#39;#table&#39;),
  $remove = $(&#39;#remove&#39;);

  $(function() {
    delData();
  });

function delData() {
        $remove.on(&#39;click&#39;, function() {
          if(confirm("是否继续删除")) {
            var rows = $.map($table.bootstrapTable(&#39;getSelections&#39;), function(row) {
              //返回选中的行的索引号
              return row.user_id;
            });
          }
          
          $.map($table.bootstrapTable(&#39;getSelections&#39;),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: &#39;application/json;charset=utf-8&#39;,
              success: function(data) {
                $table.bootstrapTable(&#39;remove&#39;,{
                  field: &#39;user_id&#39;,
                  values: rows
                });
                $remove.prop(&#39;disabled&#39;, true);
              },
              error:function(data){
                alert(&#39;删除失败！&#39;);
              }
            });
          });
        })
      }

调试方法：

数据交互实现3：新增

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

php:

<?php
  //测试php是否可以拿到数据库中的数据
  /*echo "44444";*/
  
  //做个路由 action为url中的参数
  $action = $_GET[&#39;action&#39;];

  switch($action) {
    case &#39;init_data_list&#39;:
      init_data_list();
      break;
    case &#39;add_row&#39;:
      add_row();
      break;
    case &#39;del_row&#39;:
      del_row();
      break;
    case &#39;edit_row&#39;:
      edit_row();
      break;
  }

//新增方法
  function add_row(){
    /*获取从客户端传过来的数据*/
    $userName = $_GET[&#39;user_name&#39;];
    $userAge = $_GET[&#39;user_age&#39;];
    $userSex = $_GET[&#39;user_sex&#39;];
    //INSERT INTO 表名 （列名1，列名2，...）VALUES （&#39;对应的数据1&#39;，&#39;对应的数据2&#39;，...）
    // VALUES 的值全为字符串，因为表属性设置为字符串
    $sql = "INSERT INTO t_users (user_name,user_age,user_sex) VALUES (&#39;$userName&#39;,&#39;$userAge&#39;,&#39;$userSex&#39;)";
    if(query_sql($sql)){
      echo "ok!";
    }else{
      echo "新增成功！";
    }
  }

  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;
  }
?>

前端实现JS部分：

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

<!--新增弹框-->
    <p class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <p class="modal-dialog" role="document">
        <p class="modal-content">
          <p class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">用户新增</h4>
          </p>
          <p class="modal-body">
            <form id="listForm" method="post">
              <p class="form-group">
                <label for="userName" class="control-label">用户名称</label>
                <input type="text" class="form-control" id="userName">
              </p>
              <p class="form-group">
                <label for="userAge" class="control-label">用户年龄</label>
                <input type="text" class="form-control" id="userAge">
              </p>
              <p class="form-group">
                <label class="control-label" for="user-sex">用户性别</label>
                <p class="">
                  <select id="user-sex" class="form-control" name="user-sex" style="width: 100%" >
                    <option value=&#39;-1&#39;>请选择</option>
                    <option value=&#39;0&#39;>男</option>
                    <option value=&#39;1&#39;>女</option>
                  </select>
                </p>
              </p>
            </form>
          </p>
          <p class="modal-footer">
            <button id="close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button id="save" type="button" class="btn btn-primary">保存</button>
          </p>
        </p>
      </p>
    </p>
var $table = $(&#39;#table&#39;),
   $remove = $(&#39;#remove&#39;);

  $(function() {
      searchData();
    delData();
        
    $(&#39;#save&#39;).click(function(){
      addData();
    });
  }); 
function addData(){
        var userName = $(&#39;#userName&#39;).val();
        var userAge = $("#userAge").val();
        var userSex = $(&#39;#user-sex&#39;).val() == &#39;0&#39; ? &#39;男&#39; : &#39;女&#39;;
        
        var addUrl = "./php/data.php?action=add_row&user_name=" + userName + "&user_age=" + userAge + "&user_sex=" + userSex;
        
        $.ajax({
          type:"post",
          url:addUrl,
          dataType:&#39;json&#39;,
          contentType:&#39;application/json;charset=utf-8&#39;,
          success:function(data){
            console.log("success");
          },
          error:function(data){
            console.log("data");
            //添加成功后隐蒧modal框
            setTimeout(function(){
              $(&#39;#exampleModal&#39;).modal(&#39;hide&#39;);
            },500);
　　　　　　　　　　　　　　//隐藏modal框后重新加载当前页
            setTimeout(function(){
              searchData();
            },700);
          }
        });
      }

至此，还没有解决如下问题：

1.表单验证；

2.添加多条数据后，php如何接收参数；

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

以上是php之接口与前端数据交互实现示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文转载于：jb51。如有侵权，请联系admin@php.cn删除
相关文章
您如何防止与会议有关的跨站点脚本（XSS）攻击？您如何防止与会议有关的跨站点脚本（XSS）攻击？Apr 23, 2025 am 12:16 AM

要保护应用免受与会话相关的XSS攻击，需采取以下措施：1.设置HttpOnly和Secure标志保护会话cookie。2.对所有用户输入进行输出编码。3.实施内容安全策略(CSP)限制脚本来源。通过这些策略，可以有效防护会话相关的XSS攻击，确保用户数据安全。

您如何优化PHP会话性能？您如何优化PHP会话性能？Apr 23, 2025 am 12:13 AM

优化PHP会话性能的方法包括：1.延迟会话启动，2.使用数据库存储会话，3.压缩会话数据，4.管理会话生命周期，5.实现会话共享。这些策略能显着提升应用在高并发环境下的效率。

什么是session.gc_maxlifetime配置设置？什么是session.gc_maxlifetime配置设置？Apr 23, 2025 am 12:10 AM

thesession.gc_maxlifetimesettinginphpdeterminesthelifespanofsessiondata，setInSeconds.1）它'sconfiguredinphp.iniorviaini_set（）.2）abalanceIsiseededeedeedeedeedeedeedto to to avoidperformance andununununununexpectedLogOgouts.3）

您如何在PHP中配置会话名？您如何在PHP中配置会话名？Apr 23, 2025 am 12:08 AM

在PHP中，可以使用session_name()函数配置会话名称。具体步骤如下：1.使用session_name()函数设置会话名称，例如session_name("my_session")。2.在设置会话名称后，调用session_start()启动会话。配置会话名称可以避免多应用间的会话数据冲突，并增强安全性，但需注意会话名称的唯一性、安全性、长度和设置时机。

您应该多久再生一次会话ID？您应该多久再生一次会话ID？Apr 23, 2025 am 12:03 AM

会话ID应在登录时、敏感操作前和每30分钟定期重新生成。1.登录时重新生成会话ID可防会话固定攻击。2.敏感操作前重新生成提高安全性。3.定期重新生成降低长期利用风险，但需权衡用户体验。

如何在PHP中设置会话cookie参数？如何在PHP中设置会话cookie参数？Apr 22, 2025 pm 05:33 PM

在PHP中设置会话cookie参数可以通过session_set_cookie_params()函数实现。1)使用该函数设置参数，如过期时间、路径、域名、安全标志等；2)调用session_start()使参数生效；3)根据需求动态调整参数，如用户登录状态；4)注意设置secure和httponly标志以提升安全性。

在PHP中使用会议的主要目的是什么？在PHP中使用会议的主要目的是什么？Apr 22, 2025 pm 05:25 PM

在PHP中使用会话的主要目的是维护用户在不同页面之间的状态。1)会话通过session_start()函数启动，创建唯一会话ID并存储在用户cookie中。2)会话数据保存在服务器上，允许在不同请求间传递数据，如登录状态和购物车内容。

您如何在子域中分享会议？您如何在子域中分享会议？Apr 22, 2025 pm 05:21 PM

如何在子域名间共享会话？通过设置通用域名的会话cookie实现。1.在服务器端设置会话cookie的域为.example.com。2.选择合适的会话存储方式，如内存、数据库或分布式缓存。3.通过cookie传递会话ID，服务器根据ID检索和更新会话数据。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前ByDDD
Atomfall指南：项目位置，任务指南和技巧
4 周前ByDDD
显示更多

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

显示更多

热门话题

gmail邮箱登陆入口在哪里
7659
15
CakePHP 教程
1393
52
C# 教程
1205
24
steam的账户名称是什么格式
91
11
win11激活密钥永久
73
19
显示更多