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

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

  switch($action) {
    case 'init_data_list':
      init_data_list();
      break;
    case 'add_row':
      add_row();
      break;
    case 'del_row':
      del_row();
      break;
    case 'edit_row':
      edit_row();
      break;
  }

//新增方法
  function add_row(){
    /*获取从客户端传过来的数据*/
    $userName = $_GET['user_name'];
    $userAge = $_GET['user_age'];
    $userSex = $_GET['user_sex'];
    //INSERT INTO 表名 （列名1，列名2，...）VALUES （'对应的数据1'，'对应的数据2'，...）
    // VALUES 的值全为字符串，因为表属性设置为字符串
    $sql = "INSERT INTO t_users (user_name,user_age,user_sex) VALUES ('$userName','$userAge','$userSex')";
    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;
  }
?>

<!--新增弹框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="exampleModalLabel">用户新增</h4>
          </div>
          <div class="modal-body">
            <form id="listForm" method="post">
              <div class="form-group">
                <label for="userName" class="control-label">用户名称</label>
                <input type="text" class="form-control" id="userName">
              </div>
              <div class="form-group">
                <label for="userAge" class="control-label">用户年龄</label>
                <input type="text" class="form-control" id="userAge">
              </div>
              <div class="form-group">
                <label class="control-label" for="user-sex">用户性别</label>
                <div class="">
                  <select id="user-sex" class="form-control" name="user-sex" style="width: 100%" >
                    <option value='-1'>请选择</option>
                    <option value='0'>男</option>
                    <option value='1'>女</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div 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>
          </div>
        </div>
      </div>
    </div>

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