Ajax не будет передавать данные в php файл - PullRequest
Новая
       1

Ajax не будет передавать данные в php файл

0 голосов
/ 06 мая 2019

Я пытаюсь передать данные холста в файл .php с помощью Ajax (без jQuery) и POST.

К сожалению, $ _POST в моем файле .php имеет значение NULL ..

JS

function takepicture()
{
  //...
  var canvasData = canvas.toDataURL("image/png");

  const req = new XMLHttpRequest();
  req.open('POST', '../controller/pictureController.php', true);

  req.onreadystatechange = function() {
      // XMLHttpRequest.DONE === 4
      if (this.readyState === XMLHttpRequest.DONE) {
          if (this.status === 200) {
              console.log("Response: %s", this.responseText);
          } else {
              console.log("Response status : %d (%s)", this.status, this.statusText);
          }
      }
  };

  req.send(canvasData);
}

PHP 

saveData($_POST['canvasData']);

function saveData($data)
{
    $input = $data;
    //...
    file_put_contents($output, file_get_contents($input));
}

Ответ: file_get_contents(): Filename cannot be empty, что нормально, так как var_dump(canvasData) равно NULL.

Когда я console.log canvasData из части JS присутствует строка изображения, так что я думаю, что-то пропущено через send(canvasData) верно?

Как я могу получить данные в моем php-файле?

1 Ответ

0 голосов
/ 06 мая 2019

Быстро написанное демо, использующее ajax для отправки данных изображения в бэкэнд-скрипт для обработки.Вы правы в том, что setRequestHeader нужно - лучше, если у вас есть работающая функция ajax, использовать ее, а не переписывать каждый раз IMO. 

<code><?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        print_r( $_POST );
        exit();
    }   
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>xhr - canvas - image data</title>
        <style>
            canvas{width:346px;height:288px;}
        </style>
        <script>

            const url=location.href;    //  ../controller/pictureController.php



            const takepicture=function( canvas ){
                let callback=function(r){
                    document.querySelector('pre').innerHTML=r
                }
                let xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if( this.readyState==4 && this.status==200 )callback( this.response );
                        console.info('state: %s status: %s',this.readyState,this.status)
                    };
                    xhr.open( 'POST', url, true );
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    xhr.send( 'canvasData='+canvas.toDataURL('image/png') );
            }


            document.addEventListener('DOMContentLoaded', e=>{
                let img=new Image();
                    img.onload=function(){

                        let canvas=document.querySelector('canvas');
                            canvas.width=img.width;
                            canvas.height=img.height;

                        let ctxt=canvas.getContext('2d');
                            ctxt.drawImage( img, 0, 0, img.width, img.height );

                        takepicture( canvas );                      
                    }
                img.src='/images/tmp/girl.jpg';
            });
        </script>
    </head>
    <body>
        <canvas></canvas>
        <pre>

The image used in the demo

Исходное изображение, используемое в демо / тесте

The response

Ответ от запроса ajax можно увидеть под изображением и заполнить в теге pre обратным вызовом ajax

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...