将JS / HTML转换为基于Web的 - 保存点击数据的问题

Question

I made this entire experiment with html/javascript. Basically, people have to click on a chart (I used jqplot) and the console.log saves the value on the axes (var xax and yax below) they choose.

'$('#chart').bind('jqplotClick', function(event, seriesIndex, pointIndex, data) {
var xax = pointIndex.xaxis;
    var yax = pointIndex.yaxis;
    console.log("Coordinates according to chart location for plot1 : " + xax + " - " + yax);'

This was supposed to go on mTurk, who takes care of all the data logging. Unfortunately, non-US users are no longer allowed, so I'll have to host it on my own server (server space is no prob).

I know that I can use PHP to make a text-file on the server to save things in. What I basically need is some sort of simple way where everything that was logged with console.log in js, would now be saved by php in a text-file. I also know that PHP is server-based and Javascript is client-based, so it won't be that 'simple' I guess.

I only started coding beginning of October so I'm still a newbie. I know html/css, javascript and now some php. I read some answers on the JS-PHP relationship involving AJAX but I don't know how to apply it to my problem..

Answer 1

Since it looks like you're using jQuery, have a look at their ajax documentation.

But it basically boils down to sending the data you want to the server from your client-side js:

// validate the data before sending.  

$.ajax({
  type: "POST",
  url: "saveToFile.php",
  data: { xax: xax, yax : yax }

}).error(function(xhr, errStr, err) {
    console.log("NO! something bad happened while sending to the server",errStr);

}).success(function(out) {
   var response = JSON.parse(out);

   if (response.status === 200) {
     console.log(response.message);
   }
   else if (response.status === 500) {
     console.log("data not saved, something happened while writing the file");
   }
});

and handling it in your php file (this one named saveToFile.php). My php is a little rusty, sorry for any syntax errors:

<?php

    // get your data from the client
    $xax = $_POST['xax'];
    $yax = $_POST['yax'];
    $out;

    // validate $xax and $yax

    // save your variables to a file
    $result = file_put_contents("log.txt", "Coordinates according to chart location for plot1 : " . $xax . " - " . $yax, FILE_APPEND);

    // tell the user what happened
    if ($result !== FALSE) {
      $out = [ "message" => "success!", "status" => 200];
    }
    else {
      $out = [ "message" => "error saving file", "status" => 500];
    }

    // send stuff back to the client
    echo json_encode($out);
    exit();

saving to file from the php docs.

This is a really basic example and doesn't check to see if the values you are sending to the server make sense, which is something you should do. Whenever sending data to the server, you should always validate on both ends; before sending it with JS AND when receiving it with PHP.

Hope that helps