堆栈内存溢出
  繁体   English   中英

如何从 ZA5C95B86291EA29027FCBE64458ED17 中的外部 javascript 的视图中调用 controller function？

[英]How to call controller function from view by external javascript in Laravel 7?

 原文  2020-04-20 23:15:33  6   2    javascript/ ajax/ laravel

问题描述

我的 Email 验证工作完美无缺，直到我尝试将来自视图emailvali.blade.php的 javascript 放入外部 ZDE9B9ED78D7E919ZEEFFEE 文件。 以下代码已从视图文件移至 /public/js/emailvali.js：

$(document).ready(function(){       

 $('#email').blur(function(){

  var error_email = '';
  var email = $('#email').val();
  var _token = $('input[name="_token"]').val();
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

  if(!filter.test(email))
  {    
   $('#error_email').html('<label class="text-danger">Invalid Email format</label>');
   $('#email').addClass('has-error');
   $('#register').attr('disabled', 'disabled');
  }
  else
  {
  $('#error_email').html('<label class="text-success">Email format valid</label>');
  let email = document.getElementById("email").value; //assuming your input id="email"

  $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });
   $.ajax({
    //url:"{{ route('emailvalicontroller.check') }}",
    url: emailCheckUrl,
    method:"POST",
    data:{email:email},
    error:function(xhr, status, error) {
        var err = JSON.parse(xhr.responseText);
      alert("Error: " + xhr.responseText);
    },
    success:function(data)
    {
     if(result == 'unique')
     {
      $('#error_email').html('<label class="text-success">Email Available</label>');
      $('#email').removeClass('has-error');
      $('#register').attr('disabled', false);
     }
     else
     {
      $('#error_email').html('<label class="text-danger">Email not Available</label>');
      $('#email').addClass('has-error');
      $('#register').attr('disabled', 'disabled');
     }
    }
   })
  }
 });
});

我在 web.php 的路线如下：

<?php
use Illuminate\Support\Facades\Route;

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

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::get('/emailvali', 'EmailValiController@index');
Route::post('/emailvali/check', 'EmailValiController@check')->name('emailvalicontroller.check');
});

Controller：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class EmailValiController extends Controller
{
    function index()
    {
     return view('emailvali');
    }

    function check(Request $request)
    {
      if($request->get('email'))
      {
        $email = $request->get('email');
        $data = DB::table("users") //don't set prefix.
         ->where('email', $email)
         ->count();
        if($data > 0){ echo 'not_unique'; }
        else{ echo 'unique'; }
     }
    }
}

myscript.js由emailvali.blade.php使用<script type="text/javascript" src="{{ URL::asset('js/emailvali.js') }}"></script> 。 err.message为空，但 responseText 包含exception: Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException 。 我认为问题不在于令牌，否则会出现令牌错误消息。 在这里找不到什么以及如何解决？ 是现在无法从 js 访问的emailvalicontroller吗？ 谢谢。

完整的 xhr.responseText 是：

Error: {
    "message": "",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException",
    "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\AbstractRouteCollection.php",
    "line": 43,
    "trace": [
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php",
            "line": 162,
            "function": "handleMatchedRoute",
            "class": "Illuminate\\Routing\\AbstractRouteCollection",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
            "line": 639,
            "function": "match",
            "class": "Illuminate\\Routing\\RouteCollection",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
            "line": 628,
            "function": "findRoute",
            "class": "Illuminate\\Routing\\Router",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
            "line": 617,
            "function": "dispatchToRoute",
            "class": "Illuminate\\Routing\\Router",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
            "line": 165,
            "function": "dispatch",
            "class": "Illuminate\\Routing\\Router",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 128,
            "function": "Illuminate\\Foundation\\Http\\{closure}",
            "class": "Illuminate\\Foundation\\Http\\Kernel",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php",
            "line": 21,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php",
            "line": 21,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize.php",
            "line": 27,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode.php",
            "line": 63,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\fruitcake\\laravel-cors\\src\\HandleCors.php",
            "line": 36,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Fruitcake\\Cors\\HandleCors",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\fideloper\\proxy\\src\\TrustProxies.php",
            "line": 57,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 167,
            "function": "handle",
            "class": "Fideloper\\Proxy\\TrustProxies",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
            "line": 103,
            "function": "Illuminate\\Pipeline\\{closure}",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
            "line": 140,
            "function": "then",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
            "line": 109,
            "function": "sendRequestThroughRouter",
            "class": "Illuminate\\Foundation\\Http\\Kernel",
            "type": "->"
        },
        {
            "file": "C:\\wamp64\\www\\van\\public\\index.php",
            "line": 55,
            "function": "handle",
            "class": "Illuminate\\Foundation\\Http\\Kernel",
            "type": "->"
        }
    ]
}

2 个解决方案

解决方案1
 3 已采纳  2020-04-20 23:25:32

PHP 未解析您的 JS 文件。 解决这个问题的好方法之一是先注入值，然后调用脚本，如下所示：

// in your Blade template
<script>
const emailCheckUrl = @json(route('emailvalicontroller.check'));
</script>
<script src="/js/myscript.js"></script>

然后在您的/js/myscript.js中：

$.ajax({
    url: emailCheckUrl,
    // ...
});

解决方案2
 1  2020-04-21 00:38:57

在您的emailvali.blade.php ，您应该在底部附近的某个地方有这个：

<script> const emailRoute = @json(route('emailvalicontroller.check')); </script>
<script src="{{asset('js/emailvali.js')}}"></script>

还有一个按钮可以调用 ajax 请求：

<button onclick="addSomething()">Add something</button>

现在，在您的emailvali.js文件中，您应该有如下内容：

function addSomething(){

  let email = document.getElementById("email").value; //assuming your input id="email"

$.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });
    $.ajax({
        type:'POST',
        url: emailRoute,
        data: {email:email},
        success:function(data) {
            console.log("success");
            //add your success handling here
        },
        error: function (data, textStatus, errorThrown) {
          console.log("failed");
          //add your failed handling here
        },
    });
}

在您的 Ajax 设置中包含 CSRF 令牌作为 header 更为理想，然后确保您有

 <meta name="csrf-token" content="{{ csrf_token() }}">

在您的<head> HTML 中。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从 JavaScript 调用 Laravel 控制器函数 如何从 laravel controller function 返回视图？ 无法从Laravel中的javascript调用控制器内部的函数 如何将2个JavaScript数组从laravel视图传递到laravel控制器？ 如何从我的控制器调用JavaScript函数？ 如何从MVC 4中的控制器调用JavaScript函数？ 如何从Laravel的if语句调用JavaScript函数？ 我如何从视图页面中的以下JavaScript代码调用控制器功能（Codeigniter） 如何从 Rails 6 视图调用 JavaScript function 从控制器调用javascript函数
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM