0

我是AJAX新手，在将变量传递回 HTML 脚本时遇到了一些问题。

我使用XAMPP网络服务器、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>

这是我的 Perl 脚本 ajax_test.cgi：

#!/usr/bin/perl -w

use strict;
use warnings;
use CGI;

my $query = new CGI;

my $word = $query->param('w');

print $query->header;
print "<p>You are searching for: <b>$word</b>.</p>";

更新：

我尝试使用collapsar建议的第一个解决方案，但我仍然不确定将 js 变量放在哪里，因为我需要能够在以下位置调用它们$(document).ready(function(){})：

<script language="Javascript">

function xmlhttpPost(strURL) {
    //...//
}

function getquerystring() {
    //..//
}

function updatepage(str){
    //...//
}

var resp_html = self.xmlHttpReq.responseText;
var resp_dom  = jQuery.parseHTML(resp_html );
var mydata1 = $('#<custom-id-1>', resp_dom).text();

// the alert doesn't work
$("#alertbutton").click(function () {

    alert( "You entered: " + mydata1);

});

4

1 回答 1

1

选项 1：内容处理

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

服务器端代码（增加你的样本）：

print "<p>You are searching for: <b id="<custom-id-1>">$word</b>.</p>";

客户端检索和处理：

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

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

代码片段根据您问题上的标签假定您使用jquery（如果您不这样做，为什么不呢？）。您也可以使用普通的 dom 方法，请参阅mdn 上的适用文档。

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

警告：您最好避免使用 html/xml 并使用搜索和替换来提取信息。虽然在许多情况下在技术上是可行的，但它通常是可维护性的噩梦，并且在软件的演变（阅读：新功能的集成）期间经常发生故障。

选项 2：http 标头（不推荐）

您可以选择在自定义 http 标头中发送您的信息。虽然此方法将规避解析内容和内容编码的潜在问题，但您肯定会违反rfc 6648中的建议（有关讨论，请参阅此 SO 线程）。

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

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>')
// ...

您问题的标签表明您无论如何都在使用 jquery（如果您不使用，为什么不呢？;-)），所以当您使用它时，请查看jquery ajax api。

于 2013-08-27T11:55:12.423 回答