思路分析

第一，創建表單

  <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語句

添加學生信息並顯示