タグ<form>は、ajaxリクエスト後にコードの一部を削除しますか？

Question

は、私はこのような形のようなものを持っている：

<form> 
    <input class="form-control" id="searchField" type="text"> 
    <button type="submit" id="searchUserButton">SEARCH BUTTON</button> 
</form> 

私は、私はAJAXリクエストを呼び出し、私はからいくつかの情報を印刷する（私はボタンが押されたときに把握するためにjqueryのを使用しています）検索ボタンを押しますjsonファイルがhtmlファイルにありますが、奇妙なことが起こります：

私は結果を見ることができません！それ以外の場合は、フォームタグを削除すると（入力とボタンの要素があるので）すべてがOKです。すべてのデータを見ることができます...何が起こるのですか？ jqueryを使ってajaxリクエストを正しく行うにはどうすればよいですか（ボタンを押したとき）？

のjQuery：

$("#searchUserButton").bind("click", function() { 
    searchData(); 
    }); 

アヤックス：

function searchData() { 
    $.ajax({ 
     type: 'GET', 
     url: 'data/file.json', 
     dataType: 'json', 
     success: showData, 
     error: function() { 
      // FAIL 
      alert("ERROR!"); 
     } 
    }); 

}

Answer 1

はこれにあなたのクリックイベントを変更し

：

$("#searchUserButton").bind("click", function (e) { 
    e.preventDefault(); 
    searchData(); 
}); 

あなたの問題は、私が想定していたもののようですコメントabああ。

ボタンが<form>の中にあると、フォームが処理され、ページがリロードされますが、<form>タグがないと、これは発生しません。 e.preventDefault();を実行すると、ボタンをにしないとフォームを送信し、代わりにsearchData()機能を実行します。

Answer 2

だけ

<button type="button" ... 

に

<button type="submit" ... 

を変更それ以外の形式は、とにかく提出し、あなたのページには関係なく、あなたのクリックハンドラの再読み込みします。