javascript - Perl 将值转换为表

Question

我们要求我从我创建的拖放操作中取回用户插入的值，但由于我是 Perl 的新手，我不知道该怎么做？:/

另一方面，我必须以表格的形式发布这些值。

查找这些值的函数从 foreach my param ( @params ) {................ } 开始

我的负责人建议我匹配这些值

Ex: VAR1 [

' Titre-1 ' = > 'Test'

.............. And so on.

Code JS:

var counter = 0;

    document.addEventListener("dragstart", function(event) {
        // The dataTransfer.setData() method sets the data type and the value of the dragged data
        event.dataTransfer.setData("Text", event.target.id);

        // Output some text when starting to drag the label element
        document.getElementById("action").innerHTML = "Vous avez glissé votre élément !";

        // Change the opacity of the draggable element
        event.target.style.opacity = "0.4";
        save = event;
        setTimeout(function() {
            document.getElementById('action').innerHTML = ""; }, 2500);
        });

    // While dragging the label element, change the color of the output text
    document.addEventListener("drag", function(event) {
        document.getElementById("action").style.color = "#CD5C5C";
    });

    // Output some text when finished dragging the label element and reset the opacity
    document.addEventListener("dragend", function(event) {
        if(event.target.className == "drop-target") {
            document.getElementById("action").innerHTML = "Vous avez bien déposé votre élément !";
        }
       /* else if(event.target.className == "drop-target-Titre") {
            document.getElementById("action").innerHTML = "Vous avez bien déposé votre titre !";
        }
        else if(event.target.className == "drop-target-Message") {
            document.getElementById("action").innerHTML = "Vous avez bien déposé votre message !";
        }
        else if(event.target.className == "drop-target-Image") {
            document.getElementById("action").innerHTML = "Vous avez bien déposé votre image !";
        }
        else if(event.target.className == "drop-target-Lien") {
            document.getElementById("action").innerHTML = "Vous avez bien déposé votre lien !";
        }*/
        event.target.style.opacity = "1";
        document.getElementById("action").style.color = "#CD5C5C";

        setTimeout(function() {
            document.getElementById('action').innerHTML = ""; }, 2500);
    });


    /* Events fired on the drop target */

    // When the draggable label element enters the droptarget, change the DIVS's border style
    document.addEventListener("dragenter", function(event) {
        if ( event.target.className == "drop-target") {
            event.target.style.border = "3px dotted #483D8B";
        }
        else if(event.target.className == "drop-target-1") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
        }
        else if(event.target.className == "drop-target-2") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
        }
        else if(event.target.className == "drop-target-3") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
        }
        else if(event.target.className == "drop-target-4") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre élément ! ";
        }
        else if(event.target.className == "drop-target-phone" && save.target.id == "numtel") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre n° de téléphone !";
        }
        else if (event.target.className == "drop-target-mail" && save.target.id == "mail") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre mail !";
        }
        else if(event.target.className == "drop-target-contact" && save.target.id == "contact") {
            event.target.style.border = "3px dotted #483D8B";
            document.getElementById("action").innerHTML = "Vous êtes au bon endroit pour insérer votre nom et prénom !";
        }

        setTimeout(function() {
            document.getElementById('action').innerHTML = ""; }, 2500);
    });

    // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    });

    // When the draggable label element leaves the droptarget, reset the DIVS's border style
    document.addEventListener("dragleave", function(event) {
        if(event.target.className == "drop-target") {
            event.target.style.border = "";
        }
        else if(event.target.className == "drop-target-1") {
            event.target.style.border = "";
        }
        else if(event.target.className == "drop-target-2") {
            event.target.style.border = "";
        }
        else if(event.target.className == "drop-target-3") {
            event.target.style.border = "";
        }
        else if(event.target.className == "drop-target-4") {
            event.target.style.border = "";
        }
        else if (event.target.className == "drop-target-phone") {
            event.target.style.border = "";
        }
        else if (event.target.className == "drop-target-mail") {
            event.target.style.border = "";
        }
        else if (event.target.className == "drop-target-contact") {
            event.target.style.border = "";
        }
    });

    /* On drop - Prevent the browser default handling of the data (default is open as link on drop)
       Reset the color of the output text and DIV's border color
       Get the dragged data with the dataTransfer.getData() method
       The dragged data is the id of the dragged element ("drag1")
       Append the dragged element into the drop element
    */
    /*document.addEventListener("drop", function(event) {
        event.preventDefault();
        if ( event.target.className == "drop-target-Titre" ) {
            document.getElementById("action").style.color = "";
            event.target.style.border = "";       
            var data = event.dataTransfer.getData("Text");
                switch (data) {
                    case 'Titre':
                        $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetitle"+ counter+"' ondblclick='supprimer(this,\"titre\")'> <span style='font-style: italic; margin-right: 5%; font-size: 16px'>Votre titre :</span> <input type='text' name='TitreCli' style='margin-right: 25%; width: 250px; height: 30px; background-color: #F5F5DC'></input></div>");
                        break;
                    case 'Texte':
                        $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletetext"+ counter+"' ondblclick='supprimer(this,\"texte\")'> <span style='font-style: italic; margin-right: 15%; font-size: 16px;'>Votre message : </span> <textarea name='MessageCli' style='margin-right: 25%; max-height: 50px; max-width: 500px; background-color: #F5F5DC'></textarea></div>");
                        break;
                    case 'Image':
                        $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deleteimage"+ counter+"' ondblclick='supprimer(this,\"image\")'> <span style='font-style: italic; margin-right: 24.5%; font-size: 16px'>Votre image : </span> <input type='text' name='ImageCli' style='margin-right: 25%; background-color: #F5F5DC'></input><div>");
                        break;
                    case 'Lien':
                        $('.drop-target').append("<div class='col-sm-12' droppable='false' id='deletelink"+ counter+"' ondblclick='supprimer(this,\"lien\")'> <span style='font-style: italic; margin-right: 40%; font-size: 16px'> Votre lien : </span> <input type='text' name='LienCli' style='margin-left: -12%; margin-right: 20%; background-color: #F5F5DC'></input><div>");
                        break;
                }
            counter ++;
        }
                
        });*/

    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if(event.target.className == "drop-target-1") {
            $('.drop-target-1').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"-1' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id +" :</span> <input type='text' id='"+ save.target.id +"-1'></input></div>");
        }
        else if(event.target.className == "drop-target-2") {
            $('.drop-target-2').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id +"-2' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id +" :</span> <input id='"+ save.target.id+"-2'></input></div>");
        }
        else if(event.target.className == "drop-target-3") {
            $('.drop-target-3').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"-3' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre " + save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-3'></input></div>");
        }
        else if(event.target.className == "drop-target-4") {
            $('.drop-target-4').append("<div class='col-sm-12' droppable='false' id='"+ save.target.id+"-4' ondblclick='deleteContents(this,\"" + save.target.id+"\")'> <span>Votre "+ save.target.id+" :</span> <input type='text' id='"+ save.target.id+"-4'></input></div>");
        }
        else if (event.target.className == "drop-target-phone" && save.target.id == "numtel") {
            $('.drop-target-phone').append("<div class='col-sm-4' droppable='false' id='telcli' ondblclick='deleteContents(this,\"téléphone\")' style='width: 175px; height: 80px;'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Téléphone :</span> <input type='text' id='telcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
        }
        else if (event.target.className == "drop-target-mail" && save.target.id == "mail") {
            $('.drop-target-mail').append("<div class='col-sm-4' droppable='false' id='mailcli' ondblclick='deleteContents(this,\"mail\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Mail :</span> <input type='text' id='mailcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
        }
        else if (event.target.className == "drop-target-contact" && save.target.id == "contact") {
            $('.drop-target-contact').append("<div class='col-sm-4' droppable='false' id='contactcli' ondblclick='deleteContents(this,\"contact\")' style='width: 175px; height: 80px'> <span style='font-style: italic; margin-right: 8%; font-size: 16px; text-align: center'> Contact :</span> <input type='text' id='contactcli' style='margin-right: 5%; width: 150px; height: 30px; background-color: #F5F5DC'></input></div>");
        };
        event.target.style.border = "";
    });

    function deleteContents(nom, argument) {
        $(nom).remove();
        document.getElementById("action").innerHTML = "Vous avez bien supprimé votre " +argument+" !";
        setTimeout(function() {
            document.getElementById("action").innerHTML = ""; }, 2500);
        };

/*function preview() {
        var toPrint = document.getElementById('previewarea');
        var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px');
        
        popupWin.document.open();
    popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">');
        popupWin.document.write('</html>');
        popupWin.document.close();
    }*/

function preview(url) {
regex pour le téléphone /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/; */

    var myData = {
        'rm':'previewZone',
};

        var list = document.getElementById("drop-target");
        var y = list.getElementsByTagName("input");
        /*var x = list.getElementsByTagName("textarea");
        for (i=0; i <x.length; i++)
        {
            if(x[i].id)
            {
                myData[x[i].id] = x[i].value;
                /*result = x[i].value;*/
            /*}
        }*/
        for (var i in y)
        {
            if(y[i].id)
            {
                myData[y[i].id] = y[i].value;
            }
        }
console.log(myData);
    $.post(url,myData).done(function(data)
    {
        var popupWin = window.open('', '_blank', 'width=400,height=700,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><title>::PrintPreview::</title><body><p>Vos données ont bien été enregistrées !</p></body">');
        popupWin.document.write('</html>');
        popupWin.document.close();
        });
}

Perl 代码:

sub previewZone
{
    my $self = shift;

    my $query = $self->query;

    my $session = $self->param('session');
    my $profile = $session->param('profile');

    my $User = User->newFromId($profile->{'uid'});
    if($User eq 'NOT_FOUND')
    {
        return $self->redirect('index.pl?rm=notfound');
    }

    my @params = $query->param();

    my %hash ();

    foreach my $param  (@params)
    {
       if($param =~ /([a-zA-Z]*)\-(\d)/)
       {
          my $field = $1;
          my $number = $2;
          $hash{$number}->{$field} = scalar $query->param($param) ;
      }
    }

print %hash;

***my $fnret = _formatModelPart(
            'data' => $data2,
            'part' => $part
        );***

   if($fnret eq 'FILE_NOT_FOUND' or $fnret eq 'FAILURE' or $fnret eq 'NO_DATA')
   {
      return $self->redirect('index.pl?rm=notfound');
   }


    #foreach ( my ($key, $value) = each @params) {
    #   print @params, $key . ' => '. $value;
    #}

    $log->info(Dumper(\@params));
}

Answer 1

这一行从查询中获取所有参数键

my @params = $query->param();

和 $query->param("Titre-1") 将获取您的示例参数的值，因此您可以填充哈希的方法之一是

foreach my $param (@params)
{
    $hash{$param}=$query->param($param);
}

如果你想根据参数末尾的数字对参数进行分组，你可以像这样使用正则表达式来捕获数字和字段名称，然后将参数值存储在哈希的哈希中。

if($param =~ /^(.*)-(\d+)$/)
{
    my $field=$1;
    my $number=$2;

    $hash{$number}->{$field}=$query->param($param);
}

对于看起来像 Title-1=Something&File-1=something.txt 的查询字符串，您会得到类似这样的数据结构

$VAR1 = {
          '1' => {
                   'Title' => 'Something',
                   'File' => 'something.txt'
                 }
        };