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（）