Что-то не так, отправка post-запроса с использованием jquery.post()

#ajax #.htaccess #request #xmlhttprequest #.post

#ajax #.htaccess #запрос #xmlhttprequest #.post

Вопрос:

У меня есть файл, который называется camera.php , вот источник ниже :

camera.php

     <div id="video" style="margin: auto;text-align:center;">
            <video autoplay id="vid"></video>
    </div>
        <button id="start" class="btn" onclick="Start()">Start</button>
        <button id="stop" class="btn" onclick="Stop()">Stop</button>
        <button id="takeshot" class="btn" onclick="TakeShot()">TakeShot</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
        video = document.getElementById('vid');

        function Start() {
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({video : true}).then((stream) => {
                    video.srcObject = stream;
                });
            }
            else
                console.log('ur navigator does not support getUserMedia !!');
        }

        function Stop() {
            if (video.srcObject)
                video.srcObject = undefined;
        }
        function TakeShot() {
            if (video.srcObject) {
                canvas = document.getElementById('canvas');
                gtc = canvas.getContext('2d');
                gtc.drawImage(video, 0, 0);
                imgData = canvas.toDataURL('image/png');
                //gtc.clearRect(0, 0, canvas.width, canvas.height);
                pb = document.getElementById('pb').value;
                pub(imgData, pb);
            }
            else
                console.log('you need to use Webcam to take a shot');
        }
        function pub(img, pb) {
          // using jquery.post() to send request
           $.post('https://xxxxxx.com/camera/save', {'img' : img, 'pub' : pb, 'stick' : stickSelectd}, (result) => {
                 obj = JSON.parse(result);
                 if (obj.error == true) {
                     document.getElementById('msg').innerHTML = obj.msg;
                 }
                 else
                     document.getElementById('msg').innerHTML = 'Publication has been added';
             }).done(() => {
                 alert('request is done');
             }).fail(() => {
                 alert('request is fail');
            });
         // using jquery.ajax() to send post request
            $.ajax({
                url : 'https://xxxxxx.com/camera/save',
                method : 'POST',
                data : {
                    'img' : img, 'pub' : pb, 'stick' : stickSelectd
                },
                headers : "Content-type : image/png",
                Success : (result) => {
                    alert(result);
                },
                err : () => {
                    alert('error');
                }
            });
        }
    </script>
  

.htaccess
Я знаю слишком много рисков для разрешения происхождения «*», но я использую его только для тестирования.

 Header Set Access-Control-Allow-Origin "*"

  

всегда запрашивайте отправку с помощью $.post() с предупреждением «запрос выполнен с ошибкой», и иногда запрос принимается с сервера и сохраняется изображение, но мем отвечает («запрос выполнен с ошибкой»).

в моем коде все в порядке, или я пропустил что-то вроде заголовков, .. ?? и спасибо за помощь

Ответ №1:

теперь он работает с ajax (), я меняю функцию pub на :

 function pub(img, pb) {
            $.ajax({
                url : 'https://xxxxxxxx.com/camera/save',
                method : 'POST',
                data : {
                    'img' : img, 'pub' : pb, 'stick' : stickSelectd
                },
                headers : "Content-type : image/png"
            }).done((result) => {
                obj = JSON.parse(result);
                if (obj.error == true) {
                    document.getElementById('msg').innerHTML = obj.msg;
                }
                else
                    document.getElementById('msg').innerHTML = 'Publication has been added';
            }).fail(() => {
                document.getElementById('msg').innerHTML = 'something wrong !! try again';
            })
        }

  

я не знаю, почему старый синтаксис не работает, я думаю, это нормально ?!