ajax请求控制器更新laravel视图

我找不到这个问题的工作解决方案：我想更新我的视图的一部分，而不重新加载它，我有一个表单，收集要传递的数据到控制器，控制器需要从数据库获取数据并向视图中输出JSON ，以便可以填充这些数据。ajax请求控制器更新laravel视图

我试图改编这个http://tutsnare.com/post-data-using-ajax-in-laravel-5/，但它根本不工作。收集的数据未到达控制器。

我的理解是视图中的JavaScript部分应该监听click事件并向控制器发送GET请求，控制器检查数据是否通过AJAX发送，从DB获取数据然后返回JSON响应窗体，然后更新视图。请问，有没有人有一个工作的例子，或可以解释？

2015-07-20 Chriz74

通过定期POST请求或通过AJAX向控制器发送表单与控制器相同。如果你的控制器和表单在没有AJAX的情况下工作，那么问题出现在JavaScript中，并且与Laravel控制器无关。 – ruuter

好的，但是假设您以常规方式发布给控制器，您如何向视图吐出JSON响应而不是重新加载页面？整个AJAX发布的目的不是为了防止重新加载？ – Chriz74

你很容易吐出json返回response（） - > json（['key'=>'value']）;'。这将返回正确的响应与JSON正确的标题。重新加载或不重新加载页面全部通过JavaScript完成。您向控制器发送AJAX请求并获得JSON响应，然后您必须使用您自己的数据填充视图，并使用您需要的任何JS代码。 – ruuter

使用jQuery开发的简单的工作例如：

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

，并在刀片视图文件：

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

正如你可以看到，大部分的逻辑是在与Laravel无关的JavaScript中完成。所以，如果这是你无法理解的，我建议寻找jQuery的ajax教程或rtfm :)

来源

2015-07-20 16:35:29 ruuter

我想这个代码，我修改发送我的数据而不是测试，我得到一个500内部服务器错误 – Chriz74

..等等，我终于能够以json的形式返回我需要的数据，现在我该如何修改回调函数来填充div？ – Chriz74

然而，它似乎是所产生的数据是在数组的形式，而不是json – Chriz74

我已经体验到提交一个模式的形式，无需重新加载整个页面。我让用户将选项添加到下拉列表中，然后重新填充该下拉列表中的项目，而无需在添加项目后重新加载整个页面。

你可以有你的控制器处理过程中，可以通过调用的自定义路线JavaScript和返回JSON

Route::get('/profiles/create/waterSource',function(){ 

    $data = WaterSource::orderBy('description')->get(); 

    return Response::json($data); 

});

随后的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>

您可以查看完整的教程Creating new Dropdown Option Without Reloading the Page in Laravel 5

来源

2015-08-19 08:14:13 Ikong

ajax请求控制器更新laravel视图

回答

相关问题