使用javascript和Ajax POST將表格轉換爲JSON [LARAVEL]

Question

我必須通過POST（將其轉換爲JSON格式）傳遞表單數據，並利用Laravel中的Javascript和Ajax。

基本上，表單中的數據必須成爲一個json才能通過它（帶POST）到具有能夠使用數據的方法的Controller類。 我有一個自舉形式：

<form id="contactForm" action="#" method="post"> 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> 
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword1">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
</div> 

<div class="form-group"> 
    <label for="exampleTextarea">Example textarea</label> 
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> 
</div> 

<button type="submit" class="btn btn-primary">Submit</button> 
</form> 

現在，來傳遞數據將其轉換在JSON我使用：

<script> 
var $contactForm = $('#contactForm'); 
$contactForm.submit(function(e) { 
e.preventDefault(); 
$.ajax({ 
    url: './getContact', 
    method: 'POST', 
    data: $(this).serialize(), 
    dataType: 'json', 
success:success: function(data) 
{ 

} 
}); 
}); 
</script> 

開拓Laravel routes.php文件

Route::post('./getContact', 'Controller@tryIt'); 

這是一個正確的如何使用這項服務？ （這是由於我無法使用數據表單這一事實，就像POST沒有提供任何成功一樣）。

你能幫我嗎？

在此先感謝

Answer 1

首先，你需要添加CSRF令牌 也可以嘗試這種方式。

HTML

<form id="contactForm" action="#" method="post"> 
{!! csrf_field() !!} 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> 
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword1">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
</div> 

<div class="form-group"> 
    <label for="exampleTextarea">Example textarea</label> 
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> 
</div> 

<button type="submit" class="btn btn-primary">Submit</button> 
</form> 

JS

 <script> 
    $(document).ready(function() { 
     $(document).on('contactForm', '#reg-form', function(e) { 
     var data = $("#reg-form").serialize(); 
     e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       url: '{{url("/getContact")}}', 
       data: data, 
       success: function(data) { 
       alert("success"); 
       console.log(data); 

       }, 
       error: function(data) { 
        alert("error"); 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 

路線

Route::post('/getContact', 'Controller@tryIt'); 

在tryit方法美HOULD返回JSON響應

public function tryit(Request $request){ 

//logic here 

return response()->json("success"); 

}