【HTML】input type = "submit" と "button" の違いって・・・？

検索条件を入力し、<form>の中の<input>で発火するjQueryでのDOM操作(append)を書いていて、ちょっと嵌ったので書いておく。
後でちゃんと分かったらもう少し追記したい。

<tbody>部分に<td>要素をappendしていきたかった。

1. うまくappendされなかったコード

sample.html

<form>
 <input type="text" id="name">
 <input type="submit" id="btn" value="search">
</form>

<table>
 <thead>
  <th>term A</th>
  <th>term B</th>
 </thead>
<!-- ここにappendされる -->
 <tbody id="results"></tbody>
</table>

sample.js

//searchボタン押下で発火
$(document).ready(function(){
    $('#btn').on('click',function(e){
        ajax();
    });
});

//DBからのデータ取得のためPHPへ
function ajax(){
  var search_val=$('#name').val();
  $.post('./search.php', {search_term : search_val}, function(data){
  append(data);
 },'json');
}

//json形式のデータをfor文で回してtbodyにappend
function append(data){
  var record = '';
  for(var i=0; i<data.length; i++){
    record += '<tr><td>'+ data[i].term_a +'</td><td>'+ data[i].term_b +'</td></tr>';
  }
  $('#results').append(tweets);
}

ブラウザでの挙動を見ていると、appendされてから消えているような・・・。
早すぎて見えない・・・。

2.appendされたコード
sample.htmlは同じ。
結論だけ言うと、submitのデフォルトアクションをキャンセルする
preventDefault()を追記したら回避できた・・・。

sample.js

//searchボタン押下で発火
$(document).ready(function(){
    $('#btn').on('click',function(e){
//submitのデフォルトアクションをキャンセル
        e.preventDefault();
        ajax();
    });
});

//DBからのデータ取得のためPHPへ
function ajax(){
  var search_val=$('#name').val();
  $.post('./search.php', {search_term : search_val}, function(data){
  append(data);
 },'json');
}

//json形式のデータをfor文で回してtbodyにappend
function append(data){
  var record = '';
  for(var i=0; i<data.length; i++){
    record += '<tr><td>'+ data[i].term_a +'</td><td>'+ data[i].term_b +'</td></tr>';
  }
  $('#results').append(tweets);
}

以前も同じようなコードを書いて嵌らなかったのは、
<input type="button">でHTMLを記述していたからっぽく、HTML側をそう修正してもうまくいった。

submitとbuttonの違いって・・・？
送信機能がもともと実装されているか否かだけじゃないのか・・・？
なんか押下時のスクリプトの実行のタイミングが違ったりして、そのせいかなー？とか推測していますが、調べてもよく分からん。