2

Estou tentando realizar um exemplo de requisição Ajax com o Laravel 5.4.

O exemplo para teste é simples, apenas informar um valor numérico em um campo input=text na minha View e sai do campo para enviar para o Controller, então é somado + 10 para esse valor e então retorna esse valor para minha View para que possa ser exibido em um alert.

HTML : viewteste.blade.php

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <form action="">      
            Valor: <input type="text" id="valor" name="valor" />
    </form>
  </body>
</html>

JS : o arquivo js está dentro do viewteste.blade.php, só separei para ficar mais fácil a interpretação.

<script>
    $(document).ready(function(){
       $("#valor").on('blur', function()
       {
           valor = $(this).val();

           var token = $('meta[name="csrf-token"]').attr('content');
            $.ajax({

                type:'POST',
                url:"{!! URL::to('/teste/valor') !!}",
                dataType: 'JSON',
                data: {
                    "valor": 'POST',
                },
                success:function(data){
                    // Caso ocorra sucesso, como faço para pegar o valor
                    // que foi retornado pelo controller?
                    alert('Sucesso');
                },
                error:function(){
                  alert('Erro');
                },
            });


       });
    });
</script>

Route

Route::get('/teste',      'TesteAjaxController@index');
Route::post('/teste/valor', 'TesteAjaxController@valor');

Controller

class TesteAjaxController extends Controller
{
     public function index()
    {
        return view('painel.viewteste');
    }

    public function cep(Request $request)
    {
        $valor= $request->input('valor');
        $valor += 10;
        return $valor; // Como faço para retornar em json? em caso de mensagem de erros?

    }
}

Observação: Quando eu saiu do campo e coloco um alert de teste na função do js só para ver se está funcionando ele vai ... e consigo exibir o valor o problema é no envio do ajax mesmo. Eu entro no /teste e carrega minha view, e quando eu coloco /teste/valor não exibe nada, aparece um erro:

Whoops, looks like something went wrong.
(1/1) MethodNotAllowedHttpException
1
  • apareço o erro porque o método é para requisição POST e não para GET ai da essa mensagem de método não aceito.
    – novic
    Commented 30/12/2017 às 23:05

1 Resposta 1

1

O erro aparece, porque, foi configurado a rota só para aceitar o verbo POST e isso vai funcionar com sua função em , pois, de cara a sua configuração está para o verbo POST igual configurado na sua rota.

Se quiser que esse método funcione também com outros verbos configure da seguinte forma o arquivo de rota:

Route::match(['get', 'post'], '/teste/valor', 'TesteAjaxController@valor');

com isso os dois tipos de verbo (post e get) vão funcionar.

e tem também a forma de liberar todos os verbos:

Route::any('/teste/valor', 'TesteAjaxController@valor');

Nota: o correto é ter uma rota e um verbo configurado para cada endereço, ou seja, só criar outra configuração de rota e que esteja configurado para aquele controller e método, mas, no existe a opção de configurar como foi mencionado logo acima.


Na parte do precisa colocar essa configuração:

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function(){
       $("#valor").on('blur', function()
       {
            valor = $(this).val();    
            $.ajax({

                type:'POST',
                url:"{!! URL::to('/teste/valor') !!}",
                dataType: 'JSON',
                data: {
                    "valor": valor
                },
                success:function(data){
                    // Caso ocorra sucesso, como faço para pegar o valor
                    // que foi retornado pelo controller?
                    alert('Sucesso');
                },
                error:function(){
                  alert('Erro');
                },
            });


       });
    });
</script>

Referencias

6
  • Entendi o porquê não funciona quando eu coloco o método post direto no navegador ... Mas devo estar fazendo algo errado com relação ao envio do Ajax porque minha requisicao não chega até meu Controller Commented 31/12/2017 às 17:27
  • @BrunoAparecidodaSilva fiz uma edição.
    – novic
    Commented 31/12/2017 às 22:39
  • Estou aqui tentando e ainda não funcionou, porém com a sua ajuda com o método ajax agora ele me retorna erro. deixei a seguinte rota Route::post('/teste/valor', 'TesteAjaxController@valor'); e alterei a url do ajax para url:'/teste/valor'. Isso deveria funcionar? Commented 2/01/2018 às 11:35
  • Para fácilitar criei uma var com o nome de caminhourl = 'localhost/Projetos/ProjetoAjax/public/teste/valor' e faço a url receber esse valor e ainda assim continua dando erro Commented 2/01/2018 às 11:52
  • 1
    O erro era o nome do meu token que estava com o nome incorreto! Obrigado pela ajuda ! Commented 2/01/2018 às 20:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .