web-dev-qa-db-ja.com

Ajaxを使用して、laravel 5のjson配列を返す

enter image description here「AJAX」は初めてで、「AJAX」を使用してリクエスト「ONSELECT」を送信し、「laravel 5」で「JSON」応答を受信しようとしています。

これが私の見解です

_<select>
<option data-id="a" value="a">a</option>
<option data-id="b" value="b">b</option>
<option data-id="c" value="c">c</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">
$('select').change(function(){
var data = $(this).children('option:selected').data('id');

$.ajax({
    type    :"POST",
    url     :"http://localhost/laravel/public/form-data",
    dataType:"html",
    data    :{ data1:data },

    success :function(response)
    alert("thank u");
    }),
});
</script>
_

ここにajaxリクエストを受け取るためのコントローラーがあります

_public function formdata(){
    $data = Input::get('data1');

    //somecodes

    return Response::json(array(
                    'success' => true,
                    'data'   => $data
                )); 
}
_

これが私のルートです

_ Route::post('form-data',array('as'=>'form-data','uses'=>'FormController@formdata'));
_

_form-data_と{{Url::route('form-data')}}のみでajaxのURLを変更しようとしました。

javascriptjqueryajaxjsonlaravel-5
10
sujit prasad

Laravel 5は、セキュリティ上の理由でcsrfトークン検証を使用しています。..これを試してください...

  1. Routes.phpで

    route post('form-data', 'FormController@postform');

  2. マスターレイアウトファイル内

    <meta name="csrf-token" content="{{ csrf_token() }}" />

  3. var CSRF_TOKEN = $（ 'meta [name = "csrf-token"]'）。attr（ 'content'）;
    $.ajax({
    url: '/form-data/',
    type: 'POST',
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (data) {
        console.log(data);
    }
});
18
sunil sah

エラーコールバックをajaxリクエストに追加して、エラーがスローされたかどうかを確認します。

$.ajax({
  type    :"POST",
  url     :"http://localhost/laravel/public/form-data",
  dataType:"json",
  data    :{ data1:data },
  success :function(response) {
    alert("thank u");
  },
  error: function(e) {
    console.log(e.responseText);
  }
});

応答がJSON文字列であっても、console.log（）を使用して詳細情報を表示する方が適切です。コードを試して、ブラウザコンソールに何かが記録されているかどうかをお知らせください

6
Ashik Basheer

JQueryコードのsuccessコールバックに構文エラーがあります。そのため、Laravelへのpostリクエストを行わないのは、動作するjavascriptの下で試してください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select>
<option data-id="a" value="a">a</option>
<option data-id="b" value="b">b</option>
<option data-id="c" value="c">c</option>
</select>

<script type="text/javascript">
 $(function () {
        $('select').on('change', function (e) {
                var data = $(this).children('option:selected').data('id');
        $.ajax({
                type    :"POST",
        dataType:"json",
                url     :"http://localhost/laravel/public/form-data",
                data    :{ data1:data },
                success :function(response) {
                                alert("thank u");
                }
        });
});
})
</script>

Laravelでは、単にarrayまたはobjectを返すことができ、自動的にjson応答に変換します

return ['success' => true, 'data' => $data];
2
Saqueib

コードに誤りがあります。適切に記述してください。

$.ajax({
    type    :"POST",
    url     :"http://localhost/laravel/public/form-data",
    dataType:"json",
    data    :{ data1:data },
    success :function(response){
    alert("thank u");
    }
});

更新

Returningデータ型がjsonであることがわかりました。

 dataType:"json",

または

 dataType:"jsonp",
1
Pratik

問題は、タイプが「POST」ではなく「GET」であり、

route get('form-data', 'FormController@postform');

皆さん、助けてくれてありがとう

1
sujit prasad

すべてのフォームデータを送信する場合は、データを使用します。ajaxでは$（this）.serialize（）を使用し、フォーム内では{{csrf_field（）}}を使用します

0
Vipin