在 laravel 5 中使用 Ajax 并返回 json 数组答案

【问题标题】：Using Ajax and returning json array in laravel 5在 laravel 5 中使用 Ajax 并返回 json 数组
【发布时间】：2020-09-14 19:31:29
【问题描述】：

我是“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。

【问题讨论】：

您好 Prasad，您遇到了什么错误？
没有错误，但代码不起作用
同样在 laravel 5 中，语法被认为会改变这是主要原因

标签： javascript jquery ajax json laravel-5

【解决方案1】：

出于安全原因，Laravel 5 使用 csrf 令牌验证....试试这个...

在 routes.php 中

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

在主布局文件中

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

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

【讨论】：

【解决方案2】：

在你的 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);
  }
});

最好使用 console.log() 来查看详细信息，即使响应是 json 字符串。试试代码，让我们知道浏览器控制台是否记录了某些内容

【讨论】：

仍然没有用，但它也与 laravel 5 相关，其中一些语法也在发生变化，并且在 10 天前发布
控制器的响应是什么？
我正在尝试获取 json 响应，但在此函数中，执行时没有返回响应。我只想要成功响应，但在 json
谢谢。我在这部分苦苦挣扎：错误：函数（e）{console.log（e.responseText）; }

【解决方案3】：

您的 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];

【讨论】：

尝试运行php artisan route:list并确保http://localhost/laravel/public/form-data路由已注册，使用上面的代码就可以了

【解决方案4】：

你写错了，请好好写。

$.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",

【讨论】：

如果我在“var data”之后添加一个警报，它在 ajax 之前作为警报工作，但在 ajax 之后没有响应
打开 Firebug ，并在其中打开 Net 选项卡。并编辑问题，粘贴给ajax调用的截图。

【解决方案5】：

问题是类型应该是“GET”而不是“POST”和

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

感谢大家的帮助

【讨论】：

很好，但是仅仅因为某些东西不起作用而改变请求方法并不是一个好的解决方案。如果您需要学习，您可以检查控制台以跟踪发布请求的错误。干杯:)

【解决方案6】：

如果您要发送所有表单数据，则最好在 ajax 中使用 data: $(this).serialize()，而在表单内部使用 {{ csrf_field() }}

【讨论】：