javascript - 使用 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 paths.php

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

正确的使用方法是？ (这是因为我无法使用数据表单，就像 POST 没有提供任何成功一样)。

你能帮我吗？

提前致谢

Answer 1

首先您需要添加 csrf token 也试试这个方法。

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 方法中，您应该返回 json 响应

public function tryit(Request $request){

//logic here

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

}