此路由不支持 POST 方法。 支持的方法：GET、HEAD。 嘗試使用 ajax 將數據發送到 controller

Question

我正在嘗試使用 ajax 將數據發送到 controller 並且我得到此路由不支持 POST 方法。 支持的方法：GET、HEAD。 有人可以告訴我我做錯了什么嗎？

在 web.php

Route::post('/fb', 'FormController@fb')->name('fb');

HTML：

<form method="POST" id="formfb" enctype="multipart/form-data" data-route="{{ route('fb') }}">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <button id="fbbutton" type="submit" class="dropdown-item">Save</button>
</form>

JavaScript：

<script language="javascript">

  $('#formfb').on('submit', function(e){
    e.preventDefault();

    var w= <?php echo $resolution['width'] ;?>;
    var h= <?php echo $resolution['height'] ;?>;
     $("#picture").show();
html2canvas($('#picture'), {
width: w,
height: h
}).then(function(canvas) {
  var inputURI = canvas.toDataURL('image/png');   
  var binaryVal; 
  var inputMIME = inputURI.split(',')[0].split(':')[1].split(';')[0]; 
  if (inputURI.split(',')[0].indexOf('base64') >= 0) 
      binaryVal = atob(inputURI.split(',')[1]); 
  else
      binaryVal = unescape(inputURI.split(',')[1]); 
  var blobArray = []; 
  for (var index = 0; index < binaryVal.length; index++) { 
      blobArray.push(binaryVal.charCodeAt(index)); 
  } 
  var blobObject = new Blob([blobArray], { 
            type: inputMIME 
        }); 
        var formData = new FormData();
        formData.append("blob", blobObject, "blob");



        var route= $('#form-data').data();
        var form_data= $(this);
        $.ajax({
          type: 'POST',
          url: route,
          headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
         data: form_data.serialize(),
          success: function(Response){
            console.log(Response);
          }

}); 
})
</script>

路線列表：

！！！更新！！！

Answer 1

注意：這個答案是長時間聊天 session 的結果，其中很多東西都經過測試。

在對 Apache 和 PHP 的配置進行一些更改后，以下代碼現在可以正常工作：

JavaScript / jQuery

<script type="application/javascript">
    function fb() {
        let id = "{{ $user['id'] }}";
        let email = "{{ $user['email'] }}";
        $("#picture").show();
        html2canvas($('#picture'), {
            width: {{ $resolution['width'] }},
            height: {{ $resolution['height'] }}
        }).then(function (canvas) {
            let imgData = canvas.toDataURL('image/png');
            $.ajax({
                type: "POST",
                url: '{{ route('fb') }}',
                dataType: 'text',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    base64data: imgData,
                    userid: id,
                    useremail: email
                }
            });
            let imgsrc = document.getElementById("imgfb").src;
            window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(imgsrc), "pop", "width=600, height=400, scrollbars=no");
        })
    }
</script>

PHP

Route::post('/fb', 'FormController@fb')->name('fb');

Answer 2

如果你想讓你的url參數在 AJAX 請求動態，你可以簡單地做

$.ajax({
    type: 'POST',
    url: {!!route('fb')!!},
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: form_data.serialize(),
    success: function (Response) {
        console.log(Response);
    }
});

做{!! <PHP Code> !!} {!! <PHP Code> !!}允許您將 PHP 傳遞給您的 JS