Question posted in
You can find the official documentation here.

The POST method is not supported for this route. Supported methods: GET, HEAD. Trying to send data to controller using ajax – Jquery ajax

I’m trying to send data to controller using ajax and I’m getting The POST method is not supported for this route. Supported methods: GET, HEAD.
Can someone please tell me what am I doing wrong?

In 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>

Routes list:

route:list

!!!UPDATE!!!

post2

post3

Tags:

2

Answers


  1. 0

    If you want to make your url parameter in the AJAX request dynamic, you can simply do

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

    doing {!! <PHP Code> !!} allows you to pass PHP into your JS

    Login or Signup to reply.
  2. 0

    Note: this answer is the result of a long chat session where many things were tested out.

    The following code is now working after some changes on Apache’s and PHP’s configurations:

    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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search