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


How to POST a Javascript Variable (From Client Side) to PHP File (Server Side) with AJAX using JQUERY

我有两个文件:

edit.phtmlpacked_data.php。我想将JS变量(packed_dat)发布到packed_data.php文件中,以便稍后将其保存到外部文本文件中。

*换句话说,我想将客户端变量packed_dat保存到一个文本文件中。所以我在代码中做了一个类似AJAX JQuery的调用。*

问题是,尽管服务器通知我POST成功,但文件test.txt并没有创建到同一文件夹中,也没有保存任何文本数据。

我已经检查了文件夹权限,它们是0777。我试过萤火虫,但没有告诉我更多。

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] + ''n');
        }
        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);
?>

如果有任何帮助,我将不胜感激。。。提前感谢!!!

这里可能会出现许多不同的问题。首先,我认为jQuery的$.post片段是错误的(您在末尾缺少了一个匹配的曲线括号和一个分号),所以我觉得奇怪的是,您的服务器通知您成功的POST。我会改变这个:

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

进入:

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

然后,在packed_data.php脚本中,给$uid一个默认值,这样在未设置$_POST['packed_dat']的情况下,它仍然会创建一个文件或不(并从中区分问题是在服务器端还是在客户端)。

您为packed_data.php文件编写的代码似乎是正确的,所以我认为问题在于通过AJAX传递参数值。因此,您可以用以下代码替换edit.phtml文件中的函数sendData(),我认为它应该可以工作。

edit.phtml

function sendData()
{
    var packed = "";
    packed = jQuery.toJSON(fields);
    alert(packed);
    var packed_dat = "test123";
    alert(packed_dat);
    $.ajax({
        type: 'POST',
        url: 'packed_data.php',
        data: 'packed_dat='+packed_dat,
        success: function(msg) {
            alert('success');
        }
    });
}