laravel中的ajax会重新加载一个空白页面


ajax in laravel reloads a blank page

我正试图使用ajax通过单击按钮从数据库中获取数据。现在,当我单击按钮时,会重新加载一个空白页面。我不确定为什么会发生这种情况,也不知道如何解决。

这是我认为的代码:

<form action="test" method="post" id="testForm">
  <input name="input1" type="form"> </input> <br>
  <input name="input2" type="form"> </input> <br>
  <button type="submit" class="sbutton"> Submit </button>
</form>

Javascript代码也在视图中的脚本标记之间,(我知道这不是一个好的做法,稍后会移到单独的文件中)。

$('#testForm').submit(function(e){
  var rawElement = this;
  e.preventDefault();
  var formData = $(this).serialize(); 
  $.post('test', formData).done(function(response){
      console.log(response);
  });
});

这是我的控制器中的代码:

public function getValues()
{
  $input1= $_POST["input1"];
  $input2= $_POST["input2"];
  try{
      DB::table("table")->insert(
          array("value1" => $input1, "value2" => $input2)
      );
  } catch ('Exception $e) {
      echo "something went wrong";
  }
  $object = new 'App'testClass($userID); // $object is a custom object
   return $userObject;
} 

我的路线文件中的代码:

Route:: post("test",
["as" => "test",
"uses" => "tableController@getValues"]);
Route::get("test", "PagesController@getValues"); // This just returns the page

所以现在控制器函数正在返回一个带有对象的空白页。我试图在laravel中使用ajax来获得控制器函数,只需将对象传递到当前页面,而无需重新加载页面。

解决方案是将表单放置在body标记中,并将输入字段更改为具有类型文本。以下是已更正代码的视图文件

<body>
<form action="test" method="post" id="testForm">
<input name="input1" type="text"> </input> <br>
<input name="input2" type="text"> </input> <br>
<button type="submit" class="sbutton"> Submit </button>
</form>

<script>
$('#testForm').submit(function(e){
     e.preventDefault();
  var formData = $(this).serialize(); //Get the form data and put in a structure i can send
  $.post('test', formData).done(function(response){
      console.log(response);
  });
 });
 </script>
</body>

您需要使用请求层来访问任何POST数据。

public function getValues(Request $request)
{
    $input = $request->input();
    $input1= $input["input1"];
    $input2= $input["input2"];.
    try {
        DB::table("table")->insert(
            array("value1" => $input1, "value2" => $input2)
        );
    } catch ('Exception $e) {
        dd("something went wrong");
    }
    $object = new 'App'testClass($userID); // $object is a custom object
    return $object;
} 

开始:

var data = $("#testForm").serialize();
            $.ajax({
                type: "POST",
                url: "/yourURL",
                data: data,
                dataType: 'html',
                success: function (result) {
                   alert("Your message sent!");
                }
            });

希望它能有所帮助;)