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事件，并在事件处理程序的开头触发e.preventDefault（）

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

2 个答案: