JavascriptとAjaxを使用したJSONフォームPOST [LARAVEL]

Question

LaravelでJavascriptとAjaxを利用してPOSTでフォームデータをJSON形式に変換して渡す必要があります。

基本的に、フォーム内のデータは、POSTを使用してデータを使用できる方法でControllerクラスに渡すためにjsonになっている必要があります。私が使用JSONでデータ変換渡す、今

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

： 私はブートストラップ形状を有する活用

<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は何の成功ももたらさないのです）。

お手伝いできますか？事前に

おかげであなたはまた、この方法を試してみてください トークンCSRFを追加する必要が

Answer 1

まず。 uはsのtryit方法において

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'); 

あなたの答えのためのhouldリターンJSONレスポンス

public function tryit(Request $request){ 

//logic here 

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

}