javascript - JQuery-AJAX 表单提交但重新加载页面，更改 url

Question

我正在创建一个 Laravel 应用程序，并尝试使用 AJAX 获取要提交的表单，而无需重新加载页面。我觉得我已经非常接近了，但我只是错过了一些东西。

这是我的表格:

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

我的提交按钮:

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

Aaa 和我的 Controller 方法(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获取参数，但没有记录添加到数据库中。当我不注释掉它时，没有网址更改，没有页面重新加载，没有记录添加到数据库中。

我是一个完全的 JQuery 菜鸟，我真的更喜欢 vanilla js，但我知道有必要实现这一点。我不确定 Laravel 是否参与了使这不起作用，或者发生了什么，但这实际上就是我在这里发布问题的原因哈哈

Answer 1

您可以更改为type="button"以防止重新加载页面

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

到

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