我是 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 vars放在哪里，因为我需要能够在中调用它们 $(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);
});
答案 0 :(得分：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方法，请参阅适用的documentation on mdn。
如果您使用纯文本响应，则不需要标记，因此无需解析响应并使用dom方法提取相关数据。你可以通过文本搜索获得所需的数据＆amp;替换操作。哪种方式取决于数据的复杂性和预期用途。
警告：你最好避免使用html / xml并使用search＆amp; amp;提取信息。更换。虽然在许多环境中技术上都是可行的，但它通常是可维护性的噩梦，并且在软件的演变（阅读：新功能的集成）过程中经常会出现故障。
您可以选择在自定义http标头中发送您的信息。虽然这种方法可以避免解析内容和内容编码的潜在问题，但你肯定会违反rfc 6648中的建议（讨论见this SO thread）。
已经说过，该方法在技术上是可行的。在你的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。