侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   253

最近在做前后端数据交互的尝试,也跳了很多坑,使用的是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:

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

前端实现:

                                                              增删改查        

实现效果:

数据交互实现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('remove',{                  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() == '0' ? '男' : '女';                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 中实现?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • PHP API接口必备之输出json格式数据示例代码
  • php操作JSON格式数据的实现代码
  • PHP给前端返回一个JSON对象的实例讲解
  • PHP连接MySQL数据库并以json格式输出
  • php实现将数据做成json的格式给前端使用


  • 上一条:
    Ajax+Servlet实现无刷新下拉联动效果
    下一条:
    javascript中使用正则表达式删除前后空格的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客