使用javascript和Ajax POST形成JSON [LARAVEL]

Question

I have to pass form data with POST (converting it into JSON format), exploiting Javascript and Ajax in Laravel.

Basically, the data in the form have to became a json in order to pass it (with POST), to Controller class with a method able to uses the data. I have a bootstrap form:

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

Now, to pass the data converting it in JSON I used:

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

Exploiting Laravel routes.php

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

It is a correct way to use this service? (This due to the fact that I can't use the data form, like the POST doesn't provide any success).

Could you help me?

Thanks in advance

Answer 1

First you need to add the csrf token Also try this way.

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

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

In the tryit method u should return json response

public function tryit(Request $request){

//logic here

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

}