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更改，沒有頁面重新加載，沒有記錄添加到數據庫。

我是TOTAL JQuery新手，我真的更喜歡vanilla js，但我知道有必要做到這一點。 我不確定Laravel是否參與了這項工作，或者發生了什么事，但這實際上就是為什么我在這里發布問題的原因

Answer 1

您可以更改為type="button"以防止重新加載頁面

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

至

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

Answer 2

submit類型將導致頁面重新加載。 您可以將類型更改為button並使用click事件本身。

否則， click在submit類型輸入上使用click事件，並在事件處理程序的開始處觸發e.preventDefault（）