1
votes

ajax ne fonctionne pas dans Laravel et affiche la page introuvable

Je veux envoyer OTP avec Laravel et ajax, mais quand j'appelle ajax, la page d'erreur est introuvable ...

HTML:

public function send_otp_function(Request $request)
{
 $response = array(
        'status' => 'success',
        'msg' => 'Setting created successfully',
    );
    return Response::json($response);
}

php laravel javascript jquery ajax

1 commentaires

vous devez ajouter _token qui est csrf_token à votre demande ajax car vous utilisez la demande de publication

3 Réponses :

0
votes

Bienvenue à SO. Pour autant que je sache et selon la documentation jQuery.ajax , vous avez oublié de définir datatype = 'json' dans votre requête ajax . Votre demande doit être:

$.ajax({
  type: "POST",
  url: host + "/send_otp",
    datatype: 'json',
  data: {
    name: phone_number
  },
  success: function(msg) {
    alert(msg);
  },
  error: function(request, status, error) {
    alert(request.responseText);
  }
});

1 commentaires

J'ai changé mon code maintenant, il affiche une erreur de réflexion

0
votes

Je vois quelques éléments qui pourraient générer l'erreur.

Vous ajoutez la variable host à l'URL ajax sur laquelle publier. Ce n'est pas nécessaire, vous devriez l'essayer de cette façon:

$('#send_otp_button').on('click', function(e) {
   e.preventDefault(); 
   var phone_number = $('#phone_number').val();
   alert(phone_number);
   $.ajax({
       type: "POST",
       url: "/send_otp", //remove the host variable here
       data: {
        _token: {{ csrf_token() }}, //csrf token
        name:phone_number
       },
       success: function( msg ) {
           alert( msg );
       },
       error: function (request, status, error) {
           alert(request.responseText);
       }
   }); 
});

Selon la documentation Laravel ( https://laravel.com/docs/5.8/responses), vous pouvez renvoyer des réponses json comme ci-dessous:

public function send_otp_function(Request $request)
{
 $response = array(
        'status' => 'success',
        'msg' => 'Setting created successfully',
    );
    return response()->json($response);
}

Vous devriez envoyer le jeton csrf avec votre message:

$('#send_otp_button').on('click', function(e) {
   e.preventDefault(); 
   var phone_number = $('#phone_number').val();
   alert(phone_number);
   $.ajax({
       type: "POST",
       url: "/send_otp", //remove the host variable here
       data: {name:phone_number},
       success: function( msg ) {
           alert( msg );
       },
       error: function (request, status, error) {
           alert(request.responseText);
       }
   }); 
});

0 commentaires

0
votes

  HTML : 

  <!DOCTYPE html>
    <html>
    <head>
      <title>Ajax Dynamic Dependent Dropdown in Laravel</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style type="text/css">
       .box{
        width:600px;
        margin:0 auto;
        border:1px solid #ccc;
    }
    </style>
    </head>
    <body>
      <div id="first_step">
        <div class="col-md-8">
            <input type="text" autofocus id="phone_number" class="form-control" placeholder="Enter Phone Number" id="phone_number" name="phone_number" value="{{ old('phone_number') }}" />
        </div>
        <div class="col-md-4">

        </div> 
        <div class="col-md-8 " id="otp_input">
            <input type="text" autofocus id="user_otp" class="form-control" placeholder="Enter OTP" name="otp" id="result" value="{{ old('phone_number') }}" /> 
        </div>
        <div class="col-md-12" style="padding-bottom: 10px;" id="mobile_verfication1"> </div>
        <div class="col-md-12" style="padding-bottom: 10px;" id="mobile_verfication">
            <input type="button" class="log-teal-btn small" id="send_otp_button" value="Verify Phone Number"/>
        </div>
    </div>
    {{ csrf_field() }}

    </body>
    </html>

<script>
 $(document).ready(function(){

   $('#send_otp_button').on('click', function(e) {
     var select = $('#phone_number').val();
     alert(select);
     var _token = $('input[name="_token"]').val();
     $.ajax({
        url:"{{ route('dynamicdependent.fetch') }}",
        method:"POST",
        data:{select:select, _token:_token},
        success:function(result)
        {
           alert(result);
       }

   })
 });
});
</script>

Web.php(Route File)

<?php


Route::get('/', function () {
    return view('welcome');
});


Route::get('/dynamic_dependent', 'DynamicDependent@index');

Route::post('dynamic_dependent/fetch', 'DynamicDependent@fetch')->name('dynamicdependent.fetch');

?>




//DynamicDepdendent.php (Controller)
<?php

//DynamicDepdendent.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class DynamicDependent extends Controller
{
    function fetch(Request $request)
    {
        $response = $request->get('select');
        echo $response; 
    }
}

?>

0 commentaires