Javascript 如何使用通过AJAX进行的PHP搜索的结果创建HTML选择框？
以下是一些背景：我有一个文本文件，它被分解成上下文块。每个块都有一个模式[头]的头。到目前为止，我已经能够创建一个php脚本来搜索这些头并生成一个只包含头的列表 我还没有弄清楚的是，如何将这些结果提供给一个网页，该网页将获取此列表并生成一个下拉/选择框，其中列表作为选项。以下是php脚本：Javascript 如何使用通过AJAX进行的PHP搜索的结果创建HTML选择框？,javascript,php,html,Javascript,Php,Html,以下是一些背景：我有一个文本文件，它被分解成上下文块。每个块都有一个模式[头]的头。到目前为止，我已经能够创建一个php脚本来搜索这些头并生成一个只包含头的列表 我还没有弄清楚的是，如何将这些结果提供给一个网页，该网页将获取此列表并生成一个下拉/选择框，其中列表作为选项。以下是php脚本： <?php $theList = array(); $theInFile = 'extensions.conf'; $theLine = ''; $theRetu
<?php
$theList = array();
$theInFile = 'extensions.conf';
$theLine = '';
$theReturnString = '';
$inFile=fopen($theInFile, 'r') or exit('Unable to open file.');
while(!feof($inFile))
{ $theLine = fgets($inFile);
$theLine = (string)$theLine;
// Is it a context header?
// Check for the presence of a '[', then the position of '['
// This method is used due to STRPOS returning ZERO if not found,
// which is the position we are looking for.
$x = strstr($theLine, '[');
if ($x != '')
{ $y = strpos($theLine, '[');
if ($y == 0)
{ // Only the context name itself is wanted.
// If there is anything after the ']', strip it.
$end = strlen($theLine);
$tBracket = strpos($theLine, ']') + 1;
if($end != $tBracket)
$theLine = substr($theLine, 0, $tBracket);
$theReturnString = $theReturnString.$theLine.'~';
}
}
}
fclose($inFile);
echo $theReturnString;
?>
<!DOCTYPE html>
<html>
<form id="StartingPage" action="GetList.php" method="post">
</form>
<head>
<script type="text/javascript">
function loadXMLDoc()
{ var xmlhttp;
var received;
// Browser setup;
// IF - code for IE7+, Firefox, Chrome, Opera, Safari
// ELSE - code for IE6, IE5
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// Retreive the list
xmlhttp.onreadystatechange=function()
{ var newString = new Array();
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ received = document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
received = received.split('~');
for ( i = 0; i < received.length; i++ )
document.writeln(received[i] + '<br>');
document.writeln('Done.<br>');
}
}
xmlhttp.open("GET","GetList.php",true);
xmlhttp.send();
}
</script>
感谢所有的建议和批评。如果我正确理解了问题，您需要使用该数组中的选项显示select。。这应该起作用：
<!DOCTYPE html>
<html>
<form id="StartingPage" action="GetList.php" method="post">
</form>
<head>
<script type="text/javascript">
function loadXMLDoc()
{ var xmlhttp;
var received;
// Browser setup;
// IF - code for IE7+, Firefox, Chrome, Opera, Safari
// ELSE - code for IE6, IE5
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// Retreive the list
xmlhttp.onreadystatechange=function()
{ var newString = new Array();
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ received = document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
received = received.split('~');
var select = document.createElement("select");
select.setAttribute("name", "mySelect");
select.setAttribute("id", "mySelect");
var option;
for ( i = 0; i < received.length; i++ )
{
/* create options elements */
option = document.createElement("option");
/* You can change i with received[i] if you need your options with values equal to displayed text */
option.setAttribute("value", i);
option.innerHTML = received[i];
select.appendChild(option);
}
// Append the select to the end of the body tag
document.body.appendChild(select);
// Or You can use something like this also
// document.getElementById("myDiv").appendChild(select);
}
}
xmlhttp.open("GET","GetList.php",true);
xmlhttp.send();
}
</script>
首先，出于性能原因，我认为最好使用正则表达式解析文件。 然后，选择JSON作为响应，使用Javascript阅读它会更容易。JSON也是一个很好的选择，因为它允许您轻松地更改脚本添加项目，而无需更改解析Ajax请求响应的方式 以下正则表达式将搜索介于[和]之间的内容
<?php
$content = file_get_contents('extensions.conf');
preg_match_all('~\[(.+)\]~Usmx', $content, $headers, PREG_PATTERN_ORDER);
echo json_encode($headers[1]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form id="StartingPage" action="GetList.php" method="post">
<select name="mySelectName" id="mySelectId"></select>
</form>
<script>
function loadXMLDoc()
{
// Browser setup;
// IF - code for IE7+, Firefox, Chrome, Opera, Safari
// ELSE - code for IE6, IE5
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// Retreive the list
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var mySelect = document.getElementById('mySelectId');
var headers = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < headers.length; i++) {
var option = document.createElement('option');
option.setAttribute('value', i);
option.innerHTML = headers[i];
mySelect.appendChild(option);
}
}
}
xmlhttp.open("GET", "GetList.php", true);
xmlhttp.send();
}
loadXMLDoc();
</script>
</body>
</html>