laravel ajax请求控制器更新laravel中的视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31519878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ajax request to controller to update view in laravel
提问by Chriz74
I can't find a working solution for this problem: I want to update a part of my view without reloading it, I have a form that collects the data to be passed to the controller, the controller needs to get the data from the DB and spit out a JSON to the view so that it can be filled with such data.
我找不到针对此问题的有效解决方案：我想在不重新加载的情况下更新视图的一部分，我有一个表单来收集要传递给控制器的数据，控制器需要从数据库中获取数据并向视图吐出一个 JSON，以便它可以填充此类数据。
I tried to adapt this http://tutsnare.com/post-data-using-ajax-in-laravel-5/but it's not working at all. The data collected is not reaching the controller.
我试图调整这个http://tutsnare.com/post-data-using-ajax-in-laravel-5/但它根本不起作用。收集的数据未到达控制器。
My uderstanding is the javascript part in the view should listen to the click event and send a GET request to the controller, the controller checks if the data is sent through AJAX, gets the data from DB then returns the response in JSON form, the view is then updated. Please, does anyone have a working example or can explain?
我的理解是视图中的javascript部分应该监听点击事件并向控制器发送GET请求，控制器检查数据是否通过AJAX发送，从DB获取数据然后以JSON形式返回响应，视图然后更新。请问，有没有人有一个有效的例子或可以解释？
回答by ruuter
Simple working example using JQuery:
使用 JQuery 的简单工作示例：
In you routes.phpfile:
在你的routes.php文件中：
Route::post('/postform', function () {
// here you should do whatever you need to do with posted data
return response()->json(['msg' => 'Success!','test' => Input::get('test')]);
});
and in your blade view file:
并在您的刀片视图文件中：
<form method="POST" action="{{ url('postform') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="text" name="test" value="" />
<input type="submit" value="Send" />
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$(document).ready(function()
{
var form = $('form');
form.submit(function(e){
e.preventDefault();
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: form.serialize(),
success: function(data)
{
console.log(data);
if(data.msg){
alert( data.msg + ' You said: ' + data.test);
}
}
})
});
});
});
</script>
As you can see, most of the logic is done in JavaScript which has nothing to do with Laravel. So if that is not understandable for you, I'd recommend to look for jQuery ajax tutorials or rtfm:)
如您所见，大部分逻辑是在 JavaScript 中完成的，与 Laravel 无关。因此，如果您无法理解，我建议您查找 jQuery ajax 教程或rtfm:)
回答by Ikong
I have experienced submitting a modal form without reloading the entire page. I let the user add option to the dropdown and then repopulate the items on that dropdown without reloading the entire page after and item is added.
我有过在不重新加载整个页面的情况下提交模态表单的经历。我让用户向下拉列表添加选项，然后在添加项目后重新填充该下拉列表中的项目，而无需重新加载整个页面。
you can have custom route to your controller that handles the process and can be called by javascript and will return json
您可以自定义路由到处理该过程的控制器，并且可以由 javascript 调用并返回 json
Route::get('/profiles/create/waterSource',function(){
$data = WaterSource::orderBy('description')->get();
return Response::json($data);
});
then the javascript
然后是 javascript
<script>
$(document).on('submit', '.myForm-waterSource', function(e) {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function(html) {
$.get('{{ url('profiles') }}/create/waterSource', function(data) {
console.log(data);
$.each(data, function(index,subCatObj){
if (!$('#waterSource option[value="'+subCatObj.id+'"]').length) {
$('#waterSource').append('<option value="'+subCatObj.id+'">'+subCatObj.description+'</option>');
}
});
$('#myModal-waterSource').modal('hide');
$('#modal-waterSource').val('');
});
}
});
e.preventDefault();
});
</script>
You can view the full tutorial at Creating new Dropdown Option Without Reloading the Page in Laravel 5
您可以查看在 Laravel 5中创建新的下拉选项而不重新加载页面的完整教程
