Javascript ajax从localstorage向php发送数据_Javascript_Php_Jquery_Ajax_Html

Javascript ajax从localstorage向php发送数据

javascript php jquery ajax html

Javascript ajax从localstorage向php发送数据,javascript,php,jquery,ajax,html,Javascript,Php,Jquery,Ajax,Html,我试图用ajax将localstorage中的数据发送到php，但我得到的错误是 undefined index data 该代码生成一个存储在localstorage中的dataurl。当用户单击链接时，将调用pdfGen.php，我希望在其中使用localstrage中的数据 chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> &l

我试图用ajax将localstorage中的数据发送到php，但我得到的错误是

undefined index data

该代码生成一个存储在localstorage中的dataurl。当用户单击链接时，将调用pdfGen.php，我希望在其中使用localstrage中的数据

chart.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
        $('#download').click(function() {
             $.ajax({
                type: "POST",
                url: "pdfGen.php",
                data: {data:'hello'},
                success: function(data) {
                    alert("hi");
                }
              });
         });
   }); //END $(document).ready()
</script>

<script>
  //<![CDATA[
  (function() {
     window.onload = function(){
         html2canvas(document.getElementById('chart'), {
              "onrendered": function(canvas) {
                   var img = new Image();
                   img.onload = function() {
                       img.onload = null;
                       console.log(canvas.toDataURL("image/png"));
                       window.localStorage.setItem("imgURL", canvas.toDataURL("image/png"));
                   };
                   img.onerror = function() {
                       img.onerror = null;
                       if(window.console.log) {
                           window.console.log("Not loaded image from canvas.toDataURL");
                       } else {
                           //alert("Not loaded image from canvas.toDataURL");
                       }
                   };
                   img.src = canvas.toDataURL("image/png");
               }
            });
         };
     })();
//]]>
</script>    
<body>
   <a href="pdfGen.php" id="download" >Report</a> 
   ..more code to generate the chart
</body>

chart.php
$（文档）.ready（函数（）{
$（'#下载'）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“pdfGen.php”，
数据：{data:'hello'}，
成功：功能（数据）{
警报（“hi”）；
}
});
});
}); //END$（document.ready（））
//
…生成图表的更多代码

下载按钮调用pdfGen.php脚本，该脚本使用fpdf生成报告

pdfGen.php

<?php
    echo $_POST['data']; //gives error
    /*$pdf = new FPDF();
    $pdf->AddPage();

    //over here I want to add the image from the chart.php page whose data url is now in the localstorage.
    ..more code to generate report
    $pdf->output();*/
 ?>

如何获取php脚本中的数据？我尝试进行ajax调用，但在pdfGen.php脚本中得到了未定义的索引。我收到警报HI，但无法获取服务器上的数据。

它似乎不起作用。

在ajax中，定义如下数据：

$.ajax({
                type: "POST",
                url: "pdfGen.php",
                data: { data: 'hello' },
                success: function(data) {
                    alert("hi");
                }
        });

现在您可以通过$_POST[“data”]检索它。似乎您需要阅读更多关于jQueryAjax文档的信息，请在这里阅读

ajax中的“数据”元素是您的参数

要发送到服务器的数据。如果需要，它将转换为查询字符串还不是字符串。它被附加到GET请求的url。看见 processData选项以阻止此自动处理对象必须是键/值对。如果值是数组，jQuery将序列化多个基于传统设置值的具有相同键的值（如下所述）

请参阅jQueryAjax文档中的粗体文本

编辑

发现第二个错误，是您的链接，您正在执行ajax，然后由于href，该链接还重定向到pdfGen.php，为了防止出现此错误，您可以使用href“#”，或者使用preventdefault（）：

第二次编辑

似乎您需要重定向到pdfGen.php以获取报告，然后您可能不需要ajax，您应该做的是将参数放入链接href

<a href="pdfGen.php?data=hello" id="download" >Report</a>

并通过$_get[“data”]获取数据；在php中。

在ajax中定义如下数据：

$.ajax({
                type: "POST",
                url: "pdfGen.php",
                data: { data: 'hello' },
                success: function(data) {
                    alert("hi");
                }
        });

现在您可以通过$_POST[“data”]检索它。似乎您需要阅读更多关于jQueryAjax文档的信息，请在这里阅读

ajax中的“数据”元素是您的参数

请参阅jQueryAjax文档中的粗体文本

编辑

第二次编辑

似乎您需要重定向到pdfGen.php以获取报告，然后您可能不需要ajax，您应该做的是将参数放入链接href

<a href="pdfGen.php?data=hello" id="download" >Report</a>

并通过$_get[“data”]获取数据；在php中。

您的错误是因为您使用锚定标记返回pdfGen.php。Ajax请求将在success函数中发送数据并接收响应。当您使用

时，实际上返回到pdfGen.php，在$\u POST['data']中没有任何值

Ajax调用如下所示：

var toSend = "data:"+jsVariableContainingYourText; (or simply "data:Hello";)
$.ajax({
          type: "POST",
          url: "pdfGen.php",
          data: toSend,
          success: function(data) 
          {
                  alert("hi");
          }
      });

在pfdGen.php中，作为一种良好的编程实践，还应该检查post变量是否已设置

if(isset($_POST['data'])
{  //do something  }
else
{ //appropriate message }

还要确保ajax调用的url是正确的（在您的情况下，pdfGen.php应该与html文件位于同一文件夹中）

您的错误是因为您使用锚定标记返回pdfGen.php。Ajax请求将在success函数中发送数据并接收响应。当您使用

时，实际上返回到pdfGen.php，在$\u POST['data']中没有任何值

Ajax调用如下所示：

var toSend = "data:"+jsVariableContainingYourText; (or simply "data:Hello";)
$.ajax({
          type: "POST",
          url: "pdfGen.php",
          data: toSend,
          success: function(data) 
          {
                  alert("hi");
          }
      });

在pfdGen.php中，作为一种良好的编程实践，还应该检查post变量是否已设置

if(isset($_POST['data'])
{  //do something  }
else
{ //appropriate message }

还要确保ajax调用的url是正确的（在您的情况下，pdfGen.php应该与html文件位于同一文件夹中）

实际上它仍然不起作用。我也犯了同样的错误。我已经尝试以键/值json格式发送数据，但仍然无法正常工作。。这很奇怪，你试过$.post（）方法吗？尝试使用它，我会找出上面代码失败的原因；我也在想同样的问题。所以我试过了，它发出了一个成功的发帖请求，但什么也没打印出来。它保持在同一个chart.php页面上，而不是在新页面中打印数据。好的，看起来您需要保存fpdf创建的pdf并返回文件名。实际上它仍然不起作用。我也犯了同样的错误。我已经尝试以键/值json格式发送数据，但仍然无法正常工作。。这很奇怪，你试过$.post（）方法吗？尝试使用它，我会找出上面代码失败的原因；我也在想同样的问题。所以我试过了，它发出了一个成功的发帖请求，但什么也没打印出来。它将保持在同一个chart.php页面上，而不是在新页面中打印数据。好的，您似乎需要保存由fpdf创建的pdf并返回文件名。它将处于不应出现的else条件。因此，这意味着数据不能作为post使用，这是wierd，即使我们在else条件下进行了post ajax调用，这是不应该发生的。所以我