<fieldset>
    <legend>学生信息添加</legend>
    <form id="mainForm">
      姓名：<input type="text" name="name"> <br>
      年龄：<input type="text" name="age"> <br>
      性别：<input type="text" name="gender"> <br>
      邮箱：<input type="text" name="email"> <br>
      电话：<input type="text" name="tel"> <br>
      <input type="button" name="btn" value="添加" id="btn"> <br>
    </form>
  </fieldset>

$(‘#btn‘).on(‘click‘,function(){
      // 获取填写得数据
      var fm = $(‘#mainForm‘)[0];
      var fd = new FormData(fm);
    })

  $(‘#btn‘).on(‘click‘,function(){
      // 获取填写得数据
      var fm = $(‘#mainForm‘)[0];
      var fd = new FormData(fm);
      $.ajax({
        url: ‘receive.php‘,
        data: fd,
        type: ‘post‘,
        dataType: ‘text‘,
        contentType: false,
        processData: false,
        success: function(msg) {
　　　　　　console.log(msg);
          }
      })
  })

<?php
// print_r($_POST);
$name = $_POST[‘name‘];
$age = $_POST[‘age‘];
$gender = $_POST[‘gender‘];
$email = $_POST[‘email‘];
$tel = $_POST[‘tel‘];

// 链接MySQL服务器
$conn = mysqli_connect(‘localhost‘,‘root‘,‘root‘);
// 选择要操作的数据库
mysqli_select_db($conn,‘study‘);
// 设置字符集
mysqli_query($conn,‘set names utf8‘);
// 拼接SQL语句,将数据添加到数据库
$sql = "insert into hf(sno,sname,sage,sgender,semail,stel)
values(null,‘$name‘,$age,‘$gender‘,‘$email‘,$tel)";

// 执行SQL语句,返回布尔值，后端将数据保存到数据库
$result_bool = mysqli_query($conn,$sql);
// 因为前端没有接收学生的编号，所以使用新添加的属性来获取编号，现在我拼接一个新的SQL语句，用$tel获取这个编号
$sql_no = "select sno from hf where stel=$tel";
// 执行SQL语句
$result_boolno = mysqli_query($conn,$sql_no);
// die(print_r($result_boolno));
// 使用mysqli_fetch_assoc()将结果对象转化为一维数组，格式：[‘sno‘=>‘编号‘]

$no = mysqli_fetch_assoc($result_boolno);

// die(print_r($no));
$n = $no[‘sno‘];
// echo $n;

// 将数据返回到前端
if ($result_bool) {
//把数据拼接成一个新的数组
  $tmp_arr = [
    ‘no‘ => $n,
    ‘name‘ => $name,
    ‘age‘ => $age,
    ‘gender‘ => $gender,
    ‘email‘ => $email,
    ‘tel‘ => $tel
  ];
  // 如果是true，返回数据到前端
  echo json_encode($tmp_arr);
} else {
  echo 2;
}

 // 关闭MySQL链接
mysqli_close($conn);
?>

  <!-- 追加的模板标签内容 -->
  <script type="text/template" id="tpl2">
    <tr>
        <td><%=no%></td>
        <td><%=name%></td>
        <td><%=age%></td>
        <td><%=gender%></td>
        <td><%=email%></td>
        <td><%=tel%></td>
    </tr>
  </script>

  <!-- ①a给btn绑定点击事件 -->
  <script type="text/javascript">
    $(‘#btn‘).on(‘click‘,function(){
      // ②获取填写得数据，发送ajax请求，将数据发送到后端
      var fm = $(‘#mainForm‘)[0];
      var fd = new FormData(fm);
      $.ajax({
        url: ‘receive.php‘,
        data: fd,
        type: ‘post‘,
        dataType: ‘text‘,
        contentType: false,
        processData: false,
        success: function(msg) {
          // ③后端接收前端传送过来的数据
          console.log(msg);
          // ⑤在前端追加新添加的数据
          if(msg==2) {
            location.reload();
            alert(‘添加失败‘);
          } else {
            msg = JSON.parse(msg);
            console.log(msg);
            // 这时，按要求不刷新页面，在右边添加图片轮播的内容
          var str = template(‘tpl2‘,msg);
          $(‘tbody‘).append(str);
　　　　　　　　// 清空表单内容
          fm.reset();
          }
        }
      })
      // location.reload();
    })