ajax 在 Laravel 中不起作用，显示找不到页面答案

【问题标题】：ajax is not working in Laravel showing page not foundajax 在 Laravel 中不起作用，显示找不到页面
【发布时间】：2019-08-08 10:26:16
【问题描述】：

我想用 Laravel 和 ajax 发送 OTP，但是当我调用 ajax 时它显示错误页面未找到...

HTML：

                    <div id="first_step">
                        <div class="col-md-4">
                            <input value="+91" type="text" placeholder="+1" id="country_code" name="country_code" />
                        </div> 

                        <div class="col-md-8">
                            <input type="text" autofocus id="phone_number" class="form-control" placeholder="Enter 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>

脚本：

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

web.php 中的路由：

Route::post('/send_otp', 'AccountAuth\RegisterController@send_otp_function');

//Route::post('/send_otp', 'AccountAuth\RegisterController@send_otp_function');也试试这个

控制器：

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

【问题讨论】：

当您使用 post 请求时，您需要将 _token 即 csrf_token 添加到您的 ajax 请求中

标签： javascript php jquery ajax laravel

【解决方案1】：

欢迎来到 SO。据我了解并根据jQuery.ajax documentation，您忘记在ajax 请求中设置datatype='json'。您的要求应该是：

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

【讨论】：

我已经更改了我的代码，现在它显示反射错误

【解决方案2】：

我看到了一些可能引发错误的事情。

您使用变量host 在要发布到的ajax url 前添加。不需要，你应该这样尝试：

$('#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);
       }
   }); 
});

根据 Laravel 文档 (https://laravel.com/docs/5.8/responses)，您可以返回 json 响应，如下所示：

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

您应该在您的帖子中发送 csrf 令牌：

$('#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);
       }
   }); 
});

【讨论】：

【解决方案3】：

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

?>

【讨论】：