社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 后端开发 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中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7554
15
CakePHP 教程
1382
52
steam的账户名称是什么格式
83
11
win11激活密钥永久
59
19
NYT连接提示和答案
24
96
显示更多
Related knowledge
适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 Dec 24, 2024 pm 04:42 PM

PHP 8.4 带来了多项新功能、安全性改进和性能改进，同时弃用和删除了大量功能。 本指南介绍了如何在 Ubuntu、Debian 或其衍生版本上安装 PHP 8.4 或升级到 PHP 8.4

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

Visual Studio Code，也称为 VS Code，是一个免费的源代码编辑器 - 或集成开发环境 (IDE) - 可用于所有主要操作系统。 VS Code 拥有针对多种编程语言的大量扩展，可以轻松编写

我后悔之前不知道的 7 个 PHP 函数 我后悔之前不知道的 7 个 PHP 函数 Nov 13, 2024 am 09:42 AM

如果您是一位经验丰富的 PHP 开发人员，您可能会感觉您已经在那里并且已经完成了。您已经开发了大量的应用程序，调试了数百万行代码，并调整了一堆脚本来实现操作

您如何在PHP中解析和处理HTML/XML？ 您如何在PHP中解析和处理HTML/XML？ Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML（可扩展的标记语言）是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

在PHP API中说明JSON Web令牌（JWT）及其用例。 在PHP API中说明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

php程序在字符串中计数元音 php程序在字符串中计数元音 Feb 07, 2025 pm 12:12 PM

字符串是由字符组成的序列，包括字母、数字和符号。本教程将学习如何使用不同的方法在PHP中计算给定字符串中元音的数量。英语中的元音是a、e、i、o、u，它们可以是大写或小写。 什么是元音？ 元音是代表特定语音的字母字符。英语中共有五个元音，包括大写和小写： a, e, i, o, u 示例 1 输入：字符串 = "Tutorialspoint" 输出：6 解释 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。总共有 6 个元

解释PHP中的晚期静态绑定（静态：:)。 解释PHP中的晚期静态绑定（静态：:)。 Apr 03, 2025 am 12:04 AM

静态绑定（static::）在PHP中实现晚期静态绑定（LSB），允许在静态上下文中引用调用类而非定义类。1）解析过程在运行时进行，2）在继承关系中向上查找调用类，3）可能带来性能开销。

什么是PHP魔术方法（__ -construct，__destruct，__call，__get，__ set等）并提供用例？ 什么是PHP魔术方法（__ -construct，__destruct，__call，__get，__ set等）并提供用例？ Apr 03, 2025 am 12:03 AM

PHP的魔法方法有哪些？PHP的魔法方法包括：1.\_\_construct，用于初始化对象；2.\_\_destruct，用于清理资源；3.\_\_call，处理不存在的方法调用；4.\_\_get，实现动态属性访问；5.\_\_set，实现动态属性设置。这些方法在特定情况下自动调用，提升代码的灵活性和效率。

See all articles