Ajax不会将数据传递给php文件

Question

I am trying to pass canvas data to a .php file with Ajax (no jQuery) and POST. 我试图使用Ajax（没有jQuery）和POST将canvas数据传递给.php文件。

Unfortunately, $_POST is NULL in my .php file.. 不幸的是，我的.php文件中$ _POST为NULL。

JS 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 PHP

saveData($_POST['canvasData']);

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

The response is: file_get_contents(): Filename cannot be empty which is normal as var_dump(canvasData) is NULL . 响应是： file_get_contents(): Filename cannot be empty ，这是正常的，因为var_dump(canvasData)为NULL 。

When I console.log canvasData from the JS part the image string is present so I guess something is passed through send(canvasData) right? 当我在JS部分的console.log canvasData中存在图像字符串，所以我想通过send(canvasData)传递一些东西吗？

How can I get the data in my php file? 如何在我的php文件中获取数据？

Answer 1

A quickly written demo that uses ajax to send the image data to a backend script for processing. 一个快速编写的演示，它使用ajax将图像数据发送到后端脚本进行处理。 You are right about the setRequestHeader being needed - it is better, once you have a working ajax function, to use it rather than rewriting each time IMO. 你对所需的setRequestHeader是正确的 - 一旦你有一个工作的ajax函数，它更好，使用它而不是每次重写IMO。

<?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></pre>
    </body>
</html>

The source image used in the demo/test 演示/测试中使用的源图像

The response from the ajax requestcan be seen under the image and is populated into the pre tag by the ajax callback 可以在图像下看到来自ajax请求的响应，并通过ajax回调将其填充到pre标记中

Ajax不会将数据传递给php文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-06 14:46:17

Ajax不会将数据传递给php文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-06 14:46:17

解决方案1
0 已采纳 2019-05-06 14:46:17