Форма JQuery-AJAX отправляет, но перезагружает страницу, изменяет URL

Question

Я создаю приложение Laravel и пытаюсь получить форму для отправки без перезагрузки страницы с помощью AJAX.Я чувствую, что я очень близко, но я что-то упускаю.

Вот моя форма:

<form name="new_stat" id="new_stat" role="form" >

Моя кнопка отправки:

<input type="submit" id="addStatButton" />

Aaa и мой метод контроллера (ala Laravel):

public function store(Request $request) {
    $this->validate($request, [
      'stat' => 'required',
      'game_id' => 'required',
      'player_id' => 'required',
      'period' => 'required',
      'video_timestamp' => 'required',
    ]);

    $statToAdd = Stat_Meta::where('stat_abr', $request->input('stat'))->first()->id;

    $stat = new Stat;
    $stat->stat = $statToAdd;
    $stat->game_id = $request->input('game_id');
    $stat->player_id = $request->input('player_id');
    $stat->period = $request->input('period');
    $stat->video_timestamp = $request->input('video_timestamp');

    $stat->save();

    //I got rid of this thinking it would help stop the page reload. It didn't.
    //return redirect('/take-stats/1');
}

Я попробовал этот JS, но когда я отправил форму, он зарегистрировал материал в базе данных (ууу!), Но перезагрузил страницу и добавил параметры в URL:

$('input#addStatButton').click( function() {
      $.post( '{{action("StatController@store")}}', $('form#new_stat').serialize(), function(data) {

         },
         'json' // I expect a JSON response
      );
  });

Теперь, после этогоЯ прочитал несколько мест, в которых я мог бы использовать «отправить» вместо «щелкнуть», если я не хочу перезагрузки страницы, поэтому я попробовал это:

    $('form#new_stat').on('submit', function(e) {
    //e.preventDefault();
    $.post( 'post-stat', $('form#new_stat').serialize(), function(data) {

       },
       'json' // I expect a JSON response
    );
});

Когда я делаю это с 'e.preventDefault ();»закомментировано, страница перезагружается, URL получает параметры, но запись в базу данных не добавляется.Когда я не комментирую это, ни изменение URL, ни перезагрузка страницы, ни запись не добавляются в БД.

Я ВСЕГО Noob JQuery, я действительно предпочитаю vanilla js, но я знаю, что это необходимо сделать.Я не уверен, может быть, Laravel участвует в том, чтобы заставить это не работать или что-то происходит, но именно поэтому я разместил свой вопрос здесь LOL

Answer 1

Вы можете изменить на type="button", чтобы предотвратить перезагрузку страницы

<input type="submit" id="addStatButton" />

до

<input type="button" id="addStatButton" />

Answer 2

Тип submit приведет к перезагрузке страницы при отправке.Вы можете изменить тип на button и использовать само событие click.

Или другим способом, использовать событие click на вводе типа submit и запустить e.preventDefault () вначало обработчика события