您所在的位置： 首页 > 最新热文 > 计算机探索

    如何使用JSON和Perl（HTML ::梅森）与AJAX创建动态Web页面？如何使用、梅森、页面、动态

    2023-09-10 20:15:55 作者：最是人间留不住

    我是某种与方式，我必须处理的Javascript，JSON和Perl和大多数的例子是在PHP这不是有益的，我失去了。

    我有一个网页（称为main.html中）在那里我有一个来自MySQL的数据和我有一个选项，通过ID删除行。

    然后，我有Javascript的发送ID页apagar.html这是一些乱七八糟的，现在因为我试图对付JSON，但得到它的工作原理，以及现在缺少的是删除请求后刷新。但我想介绍我的code JSON和使页面更加DINAMIC，但不知道怎么办。

    在我apagar.html我只有code删除如果在URL中的任何标识。

    我已经阅读了IBM系列（掌握Ajax）：http://www.ibm.com/developerworks/web/library/wa-ajaxintro11.html?S%5FTACT=105AGX08&S%5FCMP=EDU

    感谢你的帮助，以上是我使用的JavaScript：

     ＆LT; SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的＆GT;
  VAR pedido = FALSE; // pedido =请求

  尝试 {
     pedido =新XMLHtt prequest（）;
  }
    赶上（失败）{
       pedido = FALSE
    }

  如果（！pedido）{
     警报（O SEU浏览器NAOésuportado。）; //浏览器不支持
  }

   功能Eliminar（RID）{// relativo一个main.html中和放大器; apagar.html
      //警报（SK）; //调试
      如果（确认（Deseja rea​​lmente eliminar？））{
       VAR URL =/back/apagar.html?rid=+逃生（RID）;
       / * POST * /
       pedido.open（POST，网址，真实）;
       pedido.onreadystatechange =的updatePage;
       pedido.setRequestHeader（内容类型，应用程序/ x-WWW的形式urlen codeD）;

       pedido.send（contacto.toJSONString（））;
       //pedido.open("GET，网址，真实）;
       //pedido.send(null）;

      }
      返回false;
   }

    和梅森apagar.html页

     ＆LT;％的args＆GT;
$摆脱=＆GT; ''
＆LT; /％ARGS＆GT;

＆LT;％一度＆GT;
使用LIB/无功/网络/ projectox /';
使用DB ::登录时间; #interacao COM一个DB
使用DBI;
使用的Apache2 ::饼干; #interacao COM饼干
＆LT; /％一次＆GT;

＆LT;％初始化＆GT;
％＃VE本身existem饼干
我的$饼干=的Apache2 :: Cookie-＆G​​T;获取（$ R）;
 如果（！$饼干）{#sem饼干éenviado对Ø登录
  $间 - ＆GT;重定向（'的login.html'）;
 }

 如果（$去掉）{
  ＃奥钢联eliminar OS dados PELO勇气做的ID（$ RID）

  #ligacao一个DB
  我的$ tomada = DB :: Conexao-＆GT;登录时间（）;

  我的$ SQL = $ tomada-＆GT; prepare（？从Contactos删除其中id =）||
    死Impossivel德realizar一个operação：$！;

 $ SQL-＆GT;执行（$去掉）||死NAO FOI possivel executar：$！;

 #desliga DA DB
 $ tomada-＆GT;断开||警告NAO FOI possivel terminar一个ligação！;

＆LT; /％INIT＆GT;
    jmeter创建多用户后,如何使用多用户登录,json提取器,设置jmeter属性,跨线程组传参

    解决方案

    抱歉让你们失去了你的时间。我终于解决了我的问题：

    在我的JavaScript（使用JQuery）我所做的：

      $（文件）。就绪（函数（）{
// relativo AO main.html中
$（＃over_tabela TR）。鼠标悬停（函数（）{
    $（本）.addClass（sobre_linha）;
}）的mouseout（函数（）{
    $（本）.removeClass（sobre_linha）;
}）;

    //这是从main.html中的文件扔Ajax和JSON表为删除的行
$（'a.delete_link）。点击（函数（五）{
        即preventDefault（）;
        如果（确认（TEM一个certeza？'））{
            URL = $（本）.attr（HREF'）;
            $阿贾克斯（{
                键入：GET，
                网址：网址，
                数据类型：JSON，
                成功：函数（MSG）{
                    $（'＃LINHA _'+ msg.id）.hide（慢）;
                }
             }）;
        }
    }）;

    }）;

    然后在我的apagar.html：

     ＆LT;％的args＆GT;
$摆脱=＆GT; ''
＆LT; /％ARGS＆GT;

＆LT;％一度＆GT;
使用LIB/无功/网络/ projectox /';
使用DB ::登录时间;与数据库进行交互＃模块
使用DBI;
使用的Apache2 ::饼干; #cookies，不是正确的方式，会更新会话Cookie
＆LT; /％一次＆GT;

＆LT;％初始化＆GT;
＃VE本身existem饼干
我的$饼干=的Apache2 :: Cookie-＆G​​T;获取（$ R）;
    如果（！$饼干）{#sem饼干éenviado对Ø登录
        $间 - ＆GT;重定向（'的login.html'）;
    }

 如果（$去掉）{
  ＃奥钢联eliminar OS dados PELO勇气做的ID（$ RID）

  #database连接
  我的$ tomada = DB :: Conexao-＆GT;登录时间（）;

  我的$ SQL = $ tomada-＆GT; prepare（？从Contactos删除其中id =）||
     死Impossivel德realizar一个operação：$！;

    $ SQL-＆GT;执行（$去掉）||死NAO FOI possivel executar：$！; ＃执行或死了的消息

    #disconnect从数据库或警告有关的问题
    $ tomada-＆GT;断开||警告NAO FOI possivel terminar一个ligação！;

    打印QQ {{ID：$摆脱}}; #JSON的风格，这是什么让我发疯......笑了，最后是soooooo容易，因为这
  }
＆LT; /％INIT＆GT;

    终于在我的main.html中：

     ＆LT;％的args＆GT;
$ SAIR =＆GT; 0
＆LT; /％ARGS＆GT;

＆LT;％一度＆GT;

使用LIB/无功/网络/ projectox /';
使用DB ::登录时间;
使用DBI;
使用的Apache2 ::饼干;
＆LT; /％一次＆GT;

＆LT;％初始化＆GT;
＃VE本身existem饼干
我的$饼干=的Apache2 :: Cookie-＆G​​T;获取（$ R）;
    如果（！$饼干）{#without饼干用户被重定向到的login.html
     $间 - ＆GT;重定向（'的login.html'）;
    }

    如果（$ SAIR）{＃如果他退出：饼干过期，用户发送给的index.html
    我的$的cookie =的Apache2 :: Cookie-＆gt;新建（$ R，
        -name =＆GT; CHOCO
         - 值=＆GT; TWIX
        -expires =＆GT; + 0
        ）;
        $ cookie-＆G​​T;烘烤（$ R）;
     $ M-＆GT;重定向（'../的index.html'）;
    }


    我的$ tomada = DB :: Conexao-＆GT;登录时间（）;

    我的$ SQL = $ tomada-＆GT; prepare（SELECT * FROM Contactos）|| ＃从表Contactos选择全部或死..
        死Impossivel：$！;

    $ SQL-＆GT;执行（）||死闹FOI possivel executar：$！;

    ＃生成HTML这里
    打印QQ {
！＆LT; D​​OCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml郎=PTXML：LANG =PT＆GT;
＆LT; HEAD＆GT;
    ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集=utf-8/＆GT;
    ＆LT;链接相对=样式类型=文/ CSS的href =../太极拳/ shadowbox.css＆GT;
    ＆LT;链接相对=样式表的href =../ CSS / estilo.css类型=文本/ CSS/＆GT;

    ＆LT; SCRIPT LANGUAGE =JavaScript的SRC =../的js / jquery.js和＆GT;＆LT; / SCRIPT＆GT;
    ＆LT; SCRIPT LANGUAGE =JavaScript的SRC =../ JS / wii.js＆GT;＆LT; / SCRIPT＆GT;

    ＆LT;脚本类型=文/ JavaScript的SRC =../太极拳/ shadowbox.js＆GT;＆LT; / SCRIPT＆GT;

    ＆LT;脚本类型=文/ JavaScript的＆GT;
    Shadowbox.init（{
        语言：PT-PT，
        玩家：HTML，IFRAME，QT]，
        viewportPadding：30，
        overlayOpacity：0.9，
        overlayColor：＃9999FF
    }）;
    ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;形式ID =注销NAME =退出行动=的方法=邮报＆GT;
        ＆其中p为H.;
            ＆LT;输入类型=提交ID =SAIRNAME =SAIR值=的Sair/＆GT;
        ＆所述; / P＆GT;
    ＆LT; /形式GT;
    贝姆Vindo #USERNAME！
    ＆LT;表ID =over_tabelaNAME =over_tabelaALIGN =中心的边界=0CELLSPACING =1的cellpadding =5＆GT;
    ＆LT; THEAD＆GT;
      ＆其中; TR＆GT;
        <th>NOME</th><th>E-MAIL</th><th>MENSAGEM</th><th>OP&Ccedil;&Atilde;O</th>
      ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
        };

    我@dados; ＃收到来自数据库的数据
    我的$ dados; ＃部分@dados，ID  - ＆GT; $ dados [0];诺姆 - ＆GT; $ dados [1]等。

    而（@dados = $ SQL-＆GT; fetchrow_array（））{#data是HTML表格的形式发送
        打印QQ {
        ＆LT; TBODY＆GT;
            ＆所述; TR的id =linha_ $ dados [0]＆GT;
                ＆其中; TD＆GT; $ dados [1]; / TD＆GT;＆其中; TD＆GT; $ dados [2]所述; / TD＆GT;＆其中; TD＆GT; $ dados [3]所述; / TD＆GT;
                ＆LT; TD＆GT;
                    ＆LT;一类=edit_link的href =？/后退/ editar.html摆脱= $ dados [0]相对=太极拳; WIDTH = 440，高度= 320＆GT;
                        ＆LT; IMG SRC =../ imagens / editar.pngWIDTH =24高度=24的边界=0称号=Editar/＆GT;
                    ＆所述; / a取代;
                    ＆功放; NBSP;
                    ＆LT;一类=delete_link的href =/后退/ apagar.html摆脱= $ dados [0]？＆GT;
                        ＆LT; IMG SRC =../ imagens / eliminar.pngWIDTH =24高度=24的边界=0称号=Apagar/＆GT;
                    ＆所述; / a取代;
                ＆LT; / TD＆GT;

            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
        };
    }
    打印QQ {＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;}; HTML的#END

    从数据库#disconnect
    $ tomada-＆GT;断开||警告NAO FOI possivel terminar一个ligação：$！;
＆LT; /％INIT＆GT;

    I'm some kind of lost with the way i have to deal with Javascript, JSON and Perl and most of the examples are in PHP which is not helpfull for me.

    I have a page (called main.html) where i have a with data from MySQL and i have an option to delete a row by id.

    Then i have the Javascript sending the id to page apagar.html which is some kind mess now cos i was trying to deal with JSON, but with GET it works, and what is missing is a refresh after the delete request. But i wanted to introduce JSON in my code and make the page more dinamic but don't know how.

    And in my apagar.html i have only the code to delete if there is any id in the url.

    I have read the IBM Series (Mastering Ajax) : http://www.ibm.com/developerworks/web/library/wa-ajaxintro11.html?S%5FTACT=105AGX08&S%5FCMP=EDU

    Thank you for your help, above is the javascript i'm using:

    <script language="javascript" type="text/javascript">
  var pedido = false; // pedido = request

  try {
     pedido = new XMLHttpRequest();
  }
    catch (failed) {
       pedido = false
    }

  if (!pedido) {
     alert("O seu browser não é suportado."); // Browser not supported
  }

   function Eliminar(rid) { // relativo a main.html & apagar.html
      //alert("SK"); //debug
      if ( confirm("Deseja realmente eliminar?") ) {
       var url = "/back/apagar.html?rid=" + escape(rid);
       /*POST*/
       pedido.open("POST", url, true);
       pedido.onreadystatechange = updatePage;
       pedido.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

       pedido.send( contacto.toJSONString() );
       //pedido.open("GET", url, true);
       //pedido.send(null);

      }
      return false;
   }

    AND the Mason apagar.html page

    <%args>
$rid => ''
</%args>

<%once>
use lib '/var/www/projectox/';
use db::Conexao; #interacao com a DB
use DBI;
use Apache2::Cookie; #interacao com cookies
</%once>

<%init>
% # vê se existem cookies
my $cookies = Apache2::Cookie->fetch($r);
 if(!$cookies){ #sem cookies é enviado para o login
  $m->redirect('login.html');
 }

 if($rid) {
  # vai eliminar os dados pelo valor do id ($rid)

  #ligacao à DB
  my $tomada = db::Conexao->Conexao();

  my $sql = $tomada->prepare("Delete from Contactos where id=?") ||
    die "Impossivel de realizar a operação: $!";

 $sql->execute($rid) || die "Não foi possivel executar: $!";

 #desliga da DB
 $tomada->disconnect || warn "Não foi possivel terminar a ligação!";

</%init>

    解决方案

    sorry for making you guys lost your time. I finally resolved my issue:

    In my Javascript (using JQuery) i've done:

    $(document).ready(function() {
// relativo ao main.html
$("#over_tabela tr").mouseover( function() {
    $(this).addClass("sobre_linha");
}).mouseout( function() {
    $(this).removeClass("sobre_linha");
});

    // this is to "delete" the row from the table of main.html file throw ajax and JSON
$('a.delete_link').click(function(e){
        e.preventDefault();
        if(confirm('Tem a certeza?')){
            url = $(this).attr('href');
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                success: function(msg){
                    $('#linha_'+ msg.id).hide("slow");
                }
             });
        }
    });

    });

    Then in my apagar.html :

    <%args>
$rid => ''
</%args>

<%once>
use lib '/var/www/projectox/';
use db::Conexao;    # module that interact with database
use DBI;
use Apache2::Cookie;    #cookies, not the right way, gonna update to Session Cookies
</%once>

<%init>
# vê se existem cookies
my $cookies = Apache2::Cookie->fetch($r);
    if(!$cookies) { #sem cookies é enviado para o login
        $m->redirect('login.html');
    }

 if($rid) {
  # vai eliminar os dados pelo valor do id ($rid)

  #database connection
  my $tomada = db::Conexao->Conexao();

  my $sql = $tomada->prepare("Delete from Contactos where id=?") ||
     die "Impossivel de realizar a operação: $!";

    $sql->execute($rid) || die "Não foi possivel executar: $!"; # execute or die with a message

    #disconnect from database or warn about problem
    $tomada->disconnect || warn "Não foi possivel terminar a ligação!";

    print qq{ { id : $rid } }; #JSON style, this was what made me go crazy... lol and in the end was soooooo easy as that
  }
</%init>

    and finally in my main.html:

        <%args>
$sair => 0
</%args>

<%once>

use lib '/var/www/projectox/';
use db::Conexao;
use DBI;
use Apache2::Cookie;
</%once>

<%init>
# vê se existem cookies
my $cookies = Apache2::Cookie->fetch($r);
    if(!$cookies){ #without cookies user is redirect to login.html
     $m->redirect('login.html');
    }

    if($sair){ # if he logout : cookie expire and user is sent to index.html
    my $cookie = Apache2::Cookie->new($r,
        -name => "CHOCO",
        -value => "TWIX",
        -expires=> '+0s'
        );
        $cookie->bake($r);
     $m->redirect('../index.html');
    }


    my $tomada = db::Conexao->Conexao();    

    my $sql = $tomada->prepare("Select * from Contactos") ||        # select all from table Contactos or die..
        die "Impossivel : $!";

    $sql->execute() || die "Nao foi possivel executar: $!"; 

    # Generate HTML here
    print qq{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../shadowbox/shadowbox.css">
    <link rel="stylesheet" href="../css/estilo.css" type="text/css" />

    <script language="javascript" src="../js/jquery.js"></script>
    <script language="javascript" src="../js/wii.js"></script>

    <script type="text/javascript" src="../shadowbox/shadowbox.js"></script>

    <script type="text/javascript">
    Shadowbox.init({
        language:   "pt-PT",
        players:    ["html","iframe","qt"],
        viewportPadding: 30,
        overlayOpacity:  0.9,
        overlayColor: "#9999ff"
    });
    </script>
</head>
<body>
    <form id="logout" name="logout" action="" method="post" >
        <p>
            <input type="submit" id="sair" name="sair" value="Sair" />
        </p>
    </form>
    Bem Vindo #USERNAME !
    <table id="over_tabela" name="over_tabela" align="center" border="0" cellspacing="1" cellpadding="5">
    <thead>  
      <tr>
        <th>NOME</th><th>E-MAIL</th><th>MENSAGEM</th><th>OP&Ccedil;&Atilde;O</th>
      </tr>
    </thead>
        };

    my @dados; # receive data from database
    my $dados; # part of @dados, id -> $dados[0]; nome -> $dados[1] etc..

    while ( @dados = $sql->fetchrow_array() ) { #data is sent in html table form
        print qq{
        <tbody>
            <tr id="linha_$dados[0]">
                <td>$dados[1]</td><td>$dados[2]</td><td>$dados[3]</td>
                <td>
                    <a class="edit_link" href="/back/editar.html?rid=$dados[0]" rel="shadowbox;width=440;height=320">
                        <img src="../imagens/editar.png" width="24" height="24" border="0" title="Editar" />
                    </a>
                    &nbsp;
                    <a class="delete_link" href="/back/apagar.html?rid=$dados[0]">
                        <img src="../imagens/eliminar.png" width="24" height="24" border="0" title="Apagar" />
                    </a>
                </td>

            </tr>
        </tbody>
        };
    }
    print qq {</table>
</body>
</html>}; #end of HTML

    #disconnect from database
    $tomada->disconnect || warn "Não foi possivel terminar a ligação: $!";
</%init>

    上一篇：在Safari和Chrome浏览器的AJAX对象？浏览器、对象、Safari、Chrome

    下一篇：AJAX - 当用户离开页面 - 好或坏的做法/执行？做法、页面、用户、AJAX

    相关推荐
     
    猜您喜欢
    大爷光膀子参与核酸检测！

    大爷光膀子参与核酸检测！

    精彩图集
    精彩推荐
    图片推荐

    探秘家（tanmijia.com），深层探秘世界自然奇观未解之谜，揭秘宇宙空间、人类、生物未解之谜,世界传闻、奇闻异事ufo未解之谜。有效真实科学探索天下奇观猎奇世界。

    © 2016-2021 探秘家. All Rights Reserved 浙ICP备20029812号-3