Javascript 将字符串变量从Perl CGI脚本传递到HTML前端_Javascript_Jquery_Ajax_Cgi

Javascript 将字符串变量从Perl CGI脚本传递到HTML前端

javascript jquery ajax

Javascript 将字符串变量从Perl CGI脚本传递到HTML前端,javascript,jquery,ajax,cgi,Javascript,Jquery,Ajax,Cgi,我不熟悉AJAX，在将变量传递回HTML脚本时遇到了一些问题我使用XAMPPwebserver、JavaScript和jQuery作为HTML脚本，使用Perl cgi脚本作为后端我需要获取一个输入字符串，将其传递给CGI脚本，在那里它将用于Perl函数。 Perl cgi脚本产生的字符串变量需要传递回HTML前端，并用于$（document）.ready（function（）{}）中的函数现在，我能够将用户定义的输入传递给cgi脚本，并将结果显示为简单的HTML文本。但是如何将cgi输出

我不熟悉AJAX，在将变量传递回HTML脚本时遇到了一些问题

我使用XAMPPwebserver、JavaScript和jQuery作为HTML脚本，使用Perl cgi脚本作为后端

我需要获取一个输入字符串，将其传递给CGI脚本，在那里它将用于Perl函数。 Perl cgi脚本产生的字符串变量需要传递回HTML前端，并用于

$（document）.ready（function（）{}）

中的函数

现在，我能够将用户定义的输入传递给cgi脚本，并将结果显示为简单的HTML文本。但是如何将cgi输出用作进一步JavaScript/jQuery函数的变量呢

任何帮助都将不胜感激

这是我的HTML和JavaScript代码：

<!doctype html>
<html>
<head>
    <title>AJAX example</title>

    <script type="text/javascript" src="_lib/jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            /*
            I need to use the string variable "#searchtext" in this example function:

            $("#filter").click(function () {
                $("#testtree").jstree("search",$("#searchtext").val());
            });
            */

        });

    </script>

    <script language="Javascript">

        function xmlhttpPost(strURL) {
            var xmlHttpReq = false;
            var self = this;
            // Mozilla/Safari
            if (window.XMLHttpRequest) {
                self.xmlHttpReq = new XMLHttpRequest();
            }
            // IE
            else if (window.ActiveXObject) {
                self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            }
            self.xmlHttpReq.open('POST', strURL, true);
            self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            self.xmlHttpReq.onreadystatechange = function() {
                if (self.xmlHttpReq.readyState == 4) {
                    updatepage(self.xmlHttpReq.responseText);
                }
            }
            self.xmlHttpReq.send(getquerystring());
        }

        function getquerystring() {
            var form     = document.forms['f1'];
            var word = form.word.value;
            qstr = 'w=' + escape(word);
            return qstr;
        }

        function updatepage(str){
            document.getElementById("result").innerHTML = str;
        }
    </script>
</head>

<body>      
    <form name="f1">
        <p>word: <input name="word" type="text">  
        <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/ajax_test.cgi")'></p>
        <div id="result"></div>
    </form>

</body>
</html>

选项1：内容处理如果传输（半）结构化数据，即html或xml，则必须解析客户端服务器上的内容。为了简化对感兴趣的数据的访问，向您将在服务器端生成的标记/元素发出id属性

服务器端代码（扩展示例）：

打印“您正在搜索的：$word.”；

客户端检索和处理：

var resp_html = self.xmlHttpReq.responseText;
var resp_dom  = jQuery.parseHTML(resp_html );

var mydata1 = $('#<custom-id-1>', resp_dom).text();

var resp_html=self.xmlHttpReq.responseText；
var resp_dom=jQuery.parseHTML（resp_html）；
var mydata1=$（'#'，resp#dom）.text（）；

代码片段根据问题上的tha标记假定您使用jquery（如果您不使用，为什么不使用？）。您也可以求助于普通dom方法，请参阅适用的

如果使用纯文本响应，则不需要标记，因此不需要解析响应并使用dom方法提取相关数据。您可以通过文本搜索和替换操作获得所需的数据。选择哪种方式取决于数据的复杂性和预期用途

警告：您最好避免使用html/xml，并使用搜索和替换提取信息。虽然在许多环境下技术上是可行的，但在可维护性方面通常是一场噩梦，并且在软件的发展过程中（阅读：新功能的集成）经常出现故障

选项2：http头（不推荐）您可以选择在自定义http头中发送信息。虽然此方法将绕过解析内容和内容编码的潜在问题，但您肯定会违反中的建议（有关讨论，请参阅）

话虽如此，该方法在技术上是可行的。在perl脚本中使用

print $query->header(
    { 
        '<custom-header-1-name>' => '<custom-header-1-value>'
      , '<custom-header-2-name>' => '<custom-header-2-value>'
# ...          
    }
);

print$query->header(
{ 
'' => ''
, '' => ''
# ...          
}
);

对于客户端检索，请使用：

var mydata1 = self.xmlHttpReq.getResponseHeader('<custom-header-1-name>')
var mydata2 = self.xmlHttpReq.getResponseHeader('<custom-header-2-name>')
// ...

var mydata1=self.xmlHttpReq.getResponseHeader（“”）
var mydata2=self.xmlHttpReq.getResponseHeader（“”）
// ...

您的问题的标签表明您正在使用jquery（如果不使用，为什么不？；-），所以当您使用jquery时，请查看下面的示例

非常感谢你详尽的回答。我现在正在尝试第一个选项：我在HTML代码中添加了一个新按钮（

Alert

），并尝试设置一个警报，以查看是否可以使用变量mydata1:

$（document）.ready（function（）{$（“#alertbutton”）。单击（function（）{Alert（“您输入的：+mydata1）；}）我需要在哪里初始化三个变量resp_html、resp_dom和mydata1？您是对的，我也在使用jquery，并将了解jQueryAjax api。我对jQuery和JavaScript还是相当陌生。document.ready
不是发出警报的正确位置-您正在异步获取数据（这是“ajax”中第一个a的意思），因此您不能保证结果在构建html母版页面（包含ajax调用的页面）的dom之前到达（此时将调用document.ready
）。最简单的方法是将处理和测试放在jqueryajax
对象的done
回调中（请参见我答案中的链接）。在进行实验时，全局声明js变量（不建议在生产代码中使用）。我试图全局声明js变量，但警报仍然不起作用。我更新了问题中的代码，也许你可以看一下，告诉我我做错了什么。好的，将变量（var…
）全局声明为javascript中的第一条语句（在函数之前），定义它们（分配值）在xmlhttpPost内部，我这样做了，但警报按钮仍然不起作用：输入字段变为空白，url变为“”。
var resp_html = self.xmlHttpReq.responseText;
var resp_dom  = jQuery.parseHTML(resp_html );

var mydata1 = $('#<custom-id-1>', resp_dom).text();

print $query->header(
    { 
        '<custom-header-1-name>' => '<custom-header-1-value>'
      , '<custom-header-2-name>' => '<custom-header-2-value>'
# ...          
    }
);

var mydata1 = self.xmlHttpReq.getResponseHeader('<custom-header-1-name>')
var mydata2 = self.xmlHttpReq.getResponseHeader('<custom-header-2-name>')
// ...