思路分析

第一，创建表单

  <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绑定点击事件，获取form表单数据

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

第三、发送ajax，将表单数据发送给后端

  $(‘#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);
?>

第五、前端接收返回来的数据，使用模板引擎将数据追加到tbody中

使用模板引擎追加

  <!-- 追加的模板标签内容 -->
  <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();
    })

测试了太多会，编号的自增长达到81.。。。

关键点总结

第一、ajax进行前后端交互

第二、模板引擎的用法

第三、清空form表单（刷新页面）：

　　fm.reset();----Form标签的DOM对象有一个reset方法，该方法可以清空表单内容
　　localtion.reload()

第四、数据库操作及SQL语句

原文地址：https://www.cnblogs.com/houfee/p/9227028.html