Question

好的，所以我正在尝试使用HTML5，并在Javascript中创建了一个简单的“绘画”应用程序来绘制用户鼠标在屏幕上的位置。工作正常。

然后我想将坐标保存到文件中。我的程序已经有了一个x坐标数组和一个来自Javascript代码的y坐标数组。

当用户按下按钮时，onClick会调用Javascript中的一个函数，该函数使用jQuery，如此处的顶部答案How to get JavaScript function data into a PHP variable尝试将其传递到php文件中进行保存。

然而它不起作用。我应该将数据传递回包含画布的原始php文档吗？如果是这样的话，我如何让它来执行代码保存，因为在文档加载时运行PHP没有？

CODE：

好的，这是在原始的php文件中，其中包含用于包含画布的网页的HTMl。这是相关的保存按钮：

<button type="button" onclick="saveDrawing()" id="saveButton">Save</button>

这在单独的JS文件中调用以下内容

function saveDrawing(){
// First check that not drawing and have data
if (!readyToDraw && clickX!=null){  
    // If ready then pass back to the PHP file the data
    $url = 'file_save_test.php';
    $.get($url, {x_coords: getXCoords(), y_coords: getYCoords()});
    }
else {
    alert("Please add some coordinate points and press Finish before saving");
}
}

和file_save_test.php仅包含以下内容

<?php

// retrieve data from the JS
$buffer_data['x_coords'] = $_GET['x_coords'];
$buffer_data['y_coords']  = $_GET['y_coords'];

$x_s = $_GET['x_coords'];
$y_s = $_GET['y_coords'];

// first want to open a file
$file_name = "data_test.txt";
$file_handler = fopen($file_name, 'w');

// now to loop through arrays and write!
/*for ($i = 0; $i < sizeof($x_s); i++){
    fwrite($file_handler, "$x_s[i], ");
    fwrite($file_handler, "$y_s[i]\n");
} */


fclose($file_handler);


?>

Answer 1

在你的PHP文件中，看起来你的fwrite代码被注释掉了。您是否希望它写入data_test.txt文件？尝试更改您的PHP文件以打印结果，并将其回显到您的javascript以查看数据是否正确传达。

$.get($url, {x_coords: getXCoords(), y_coords: getYCoords()},
    function(data){
        alert("Data Loaded: " + data);
    });

PHP

print_r($_GET);

修改

如果正确提醒数据（它应该将坐标附加到您的文件中），请将您的PHP文件更改为此类文件：

<?php // retrieve data from the JS $x_s = $_GET['x_coords']; $y_s = $_GET['y_coords']; $file_name = "data_test.txt"; $file_handler = fopen($file_name, 'a'); fwrite($file_handler, "$x_s, $y_s \n"); fclose($file_handler); ?>

编辑2

将for循环更新为原始代码

for ($i = 0; $i < count($x_s); $i++){ fwrite($file_handler, $x_s[$i] . ", ". $y_s[$i] . "\n"); }

Answer 2

我要做的是让你的保存按钮调用jQuery的$.post()方法。将数据发布到另一个PHP文件，该文件将其插入数据库或将其另存为文件。我不建议使用原始文档发布数据，因为客户端必须下载整个DOM，服务器将运行您不需要的任何其他代码。

在没有看到任何代码的情况下，我可以真正帮助你。

Answer 3

我会将数据发送到一个名为saveCoords.php的新php脚本中。或者是什么..

你说你已经拥有JavaScript数组中的坐标，所以它看起来像这样......

//JAVASCRIPT FUNCTION which will request php file to store info
function storeCoords(xCoordArray, yCoordArray){
  var xCoords = JSON.stringify(xCoordArray);
  var yCoords = JSON.stringigy(yCoordArray);

  var request = new XMLttpRequest(); //will need to change for older ie 
  request.onreadystatechange = function(){
    //functions to handle returning information from php file..
  }

  request.open("GET","saveCoords.php?xCoords="+xCoords+"&yCoords="+yCoords, true);
  request.send();
}

然后saveCoords.php文件看起来像这样：

<?php
  $xCoords = json_decode($_GET['xCoords']);
  $yCoords = json_decode($_GET['yCoords']);

  //now you have a php array of xCoords and yCoords, which you can store
?>

这是一个骨架，但我认为它取决于主要观点，但对任何问题都有评论。

如何通过在Javascript中按下按钮将文件保存到服务器

3 个答案: