如何使用JQUERY使用AJAX将Javascript变量（从客户端）发布到PHP文件（服务器端）

Question

I have two files:

edit.phtml and packed_data.php. I want to post the JS variable (packed_dat) to packed_data.php file in order to save it later to an external text file.

*In other words i want to save the client-side variable packed_dat into a text file. So i do an AJAX JQuery call like this in the code.*

The problem is that although the server informs me about a successful POST, the file test.txt is not being created into the same folder, and no text data is being saved.

I have checked the folder permissions, they are 0777. I have tried Firebug without telling me anything more.

edit.phtml:

<div class="content-header">
<table cellspacing="0">
    <tr>
        <td style="width:50%;"><h3 class="icon-head head-products">Manage maps</h3></td>
        <td class="a-right">
                <button style="" onclick="sendData()" class="scalable save" type="button"><span>Save</span></button>
                        <button style="" onclick="what()" class="scalable" type="button"><span>Show data</span></button>
            <button type="button" class="scalable back" onclick="javascript:history.back()"><span>Cancel</span></button>
        </td>
    </tr>
</table>
</div>



<?php

//$this->debug();

$droppables = $this->getDroppable();

$draggables = $this->getDraggable();

?>

<div id="map_body">

            <div id="map_left">

                <div id="drop_unmapped" style="height: <?php echo count($draggables)*30+70; ?>px;" class="ui-widget-header drop big">

                    <p>XML fields</p>
                    <?php foreach($draggables as $key => $value) {
                        echo '<div id="drag_'.$value['name'].'" class="ui-widget-content drag">'                        .PHP_EOL;
                        echo $value['name']                                                                                                                                     .PHP_EOL;
                        echo '</div>'                                                                                                                                           .PHP_EOL;
                    }?>
                </div>

</div>

<div id="map_right">
                    <?php foreach($droppables as $value) {

                    ?>
            jQuery("#drop_<?php echo $value->getIdentifier(); ?>").droppable({
            drop: function(event, ui) {
                jQuery(this).addClass('ui-state-highlight');
                for(key in fields){
                    if(fields[key] == jQuery(ui.draggable).html()){
                        fields[key] = 0;
                    }
                }
                fields["<?php echo $value->getIdentifier(); ?>"] = (jQuery(ui.draggable).html());
            },
            out: function(event, ui) {
                jQuery(this).removeClass('ui-state-highlight');
            }
        });
                   <?php
                    }
                   ?>

        jQuery("#drop_unmapped").droppable({
            drop: function(event, ui) {
                for(key in fields){
                    if(fields[key] == jQuery(ui.draggable).html()){
                        fields[key] = 0;
                    }
                }
            }
        });

    });

</script>

<script type="text/javascript">
    jQuery(function() {

    <?php
    foreach($draggables as $key => $value){
    ?>
        jQuery("#drag_<?php echo $value['name']; ?>").draggable({
                                  revert: 'invalid',
                                  snap: '.drop',
                                  snapMode: 'inner',
                                  snapTolerance: 10,
                                  drag: function(event, ui) {jQuery(this).draggable('option', 'zIndex', 10000);}
                                  });
    <?php
    }
    ?>
    });

    var fields=new Object();

    <?php
    foreach($droppables as $value){
        echo 'fields["'.$value->getIdentifier().'"] = 0;' . PHP_EOL;
    }
    ?>

    function what(){

        var string ='';

        for(key in fields) {
            string += (key + '=' + fields[key] + '
');
        }

        alert(string);

    }

    function sendData()
    {
      var packed = "";
      packed = jQuery.toJSON(fields);
      alert(packed);

          var packed_dat = "test123";
          alert(packed_dat);

          function() {
          jQuery.post( 'packed_data.php', {'packed_dat': packed_dat},
                  function() {
                        alert('Write OK!');
          })

      alert(packed_dat);

      document.data.data.value = packed;
      document.data.submit();
    }

</script>

packed_data.php:

<?php

echo 'ok'; 

if(isset($_POST['packed_dat']))
{
    $uid = $_POST['packed_dat'];

    // Do whatever you want with the $uid
}

$dir = 'myDir';

 // create new directory with 777 permissions if it does not exist yet
 // owner will be the user/group the PHP script is run under
 if ( !file_exists($dir) ) {
  mkdir ($dir, 0777);
 }

file_put_contents ($dir.'/test.txt', $uid);

?>

I would appreciate any help... Thanks in advance!!!

Answer 1

There could be many different things going wrong here. First, I think your jQuery's $.post snippet is wrong (you're missing a matching curvy bracket and a semicolon at the end) so I find it weird that your server informs you about a successful POST. I'd change this:

function() {
     jQuery.post( 'packed_data.php', {'packed_dat': packed_dat},
        function() {
            alert('Write OK!');
})

Into this:

$.post('packed_data.php', { packed_dat: packed_dat }, function (data) {
    alert('Write OK!');
});

And then, in your packed_data.php script, give $uid a default value so in case $_POST['packed_dat'] isn't set, it still creates a file or not (and from that distinguish whether the problem is in the server side or in the client side).