0

以下是我的 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({
                                    type: "GET",
                                    url : "process.cgi",
                                    data : {
                                            'value' : value1,
                                    },
                                    success : function(data) {
                                            alert("success");
                                    }

                            });

在我的 cgi 文件中，我尝试打印类似的值，

 print $cgi->param("value");

但是，那里没有打印任何值。可能是什么问题？谁能帮我解决这个问题？？？

4

1 回答 1

2

这里有许多不同的技术相互作用。一次测试它们以查看问题所在是一个好主意。

  1. 从命令行运行您的 Perl 程序以确保它执行正确的操作。
  2. 通过直接在浏览器中键入 URL 来运行您的 Perl 程序，以确保它正确响应 HTTP 请求。
  3. 伪造一个调用您的 Perl 程序的静态 HTML 页面，以确保您以正确的格式传递正确的参数。
  4. 将 jQuery 和 Ajax 添加到您的 HTML 页面中，以便它准确地重新创建您在第 3 阶段中使用的静态表单。

在确定每个阶段都正常工作之前，不要进入下一个阶段。只有真正糟糕的程序员才会尝试同时调试所有这些技术。

于 2013-06-28T13:56:48.377 回答