想要将带有ajax的jquery变量传递给perl文件,并检索cgi页面中的值

时间:2013-06-28 11:29:36

标签: jquery html ajax perl cgi

以下是我的HTML代码:

following is my template code : 

<html>
<head>

<script type = "text/javascript" src = "jquery.min.js"></script>
<script>
var counter = 0;
var txt1 = "group_save";
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "input";
newText.name = txt1+counter;
//newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
   function edit(element){
  var tr = jQuery(element).parent().parent();
    if(!tr.hasClass("editing")) {
            tr.addClass("editing");
            tr.find("DIV.td").each(function(){
                    if(!jQuery(this).hasClass("action")){
                            var value = jQuery(this).text();

                            jQuery(this).text("");
                            jQuery(this).append('<input type="text" value="'+value+'" />');

                    } else {
                            jQuery(this).find("BUTTON").text("save");
                    }
            });
    } else {
            tr.removeClass("editing");
            tr.find("DIV.td").each(function(){
                    if(!jQuery(this).hasClass("action")){
                            var value1 = jQuery(this).find("INPUT").val();
                            alert(value1);
                            jQuery(this).text(value1);
                            jQuery(this).find("INPUT").remove();
                    } else {
                            jQuery(this).find("BUTTON").text("edit");
                    }
            });
    }
}
</script>

</head>
<body >
<form name="group" method="post" action="process.cgi">
<div id="mainContainer">
<div><input type="button" value="Add" onClick="addNew()"></div>
 </div>
 <div><input type = "submit" value = "Save"></div>
</form>
[% IF count > 0%]

<b>Details of Groups</b><br>

<div class= "table">
<div class = "thead">
  <div class = "tr">

<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
 </div>
</div>

<div class= "tbody">

[%- SET i = 0;
 WHILE i < id.size; -%]

 <form  class = "tr">
<div class = "td">&nbsp; [% id.$i %]<br/></div>
<div class = "td">&nbsp; [% group_name.$i %]<br/></div>
<div class = "td">&nbsp; [% group_desc.$i %]<br/></div>
<div class = "td">[% actv.$i %]<br/></div>
<div class = "td action" ><button type="button" onclick="edit(this);">edit</button>   </div>
<form>
[%-     SET i = i + 1;
END -%]
</div>
 </body>
</html>

我想编辑表的内容,并将其传递给cgi文件。 我已警告value1并发现,我编辑的值将在value1中。 我的要求是,我需要将这些值传递给cgi文件。

我在这行下面写了一个这样的ajax调用,     var value1 = jQuery(this).find(“INPUT”)。val();

ajax电话:

                  $.ajax({
                                    type: "GET",
                                    url : "process.cgi",
                                    data : {
                                            'value' : value1,
                                    },
                                    success : function(data) {
                                            alert("success");
                                    }

                            });

在我的cgi文件中,我试图打印像

这样的值
 print $cgi->param("value");

但是,没有值打印在那里。可能是什么问题?有人可以帮我解决这个问题吗???

1 个答案:

答案 0 :(得分:2)

这里有许多不同的技术相互作用。最好一次测试一下,看看问题出在哪里。

  1. 从命令行运行Perl程序以确保它 做对了。
  2. 通过直接在浏览器中输入URL来运行您的Perl程序,以确保它能正确响应HTTP请求。
  3. 假设一个静态HTML页面调用您的Perl程序,以确保您以正确的格式传递正确的参数。
  4. 将jQuery和Ajax添加到HTML页面中,以便精确地重新创建 您在第3阶段使用的静态表单。
  5. 在确定每个阶段都能正常工作之前,请不要进入下一阶段。只有一个非常糟糕的程序员才会尝试同时调试所有这些技术。