我正在尝试将 JavaScript 变量传递给 PHP，以便我可以创建一个（MySQL）查询来返回单个记录。用户将输入一个搜索字符串，无论有多少记录都包含匹配的字符串，该搜索字符串都会返回。然后用户将选择他们想要查看的单个记录。
这是我的 HTML (recipe_summary.php)：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table>
<tr>
<th>Recipe ID</th>
<th>Title</th>
<th>Ingredients</th>
<th>Recipe</th>
</tr>
<?php foreach($search_results as $result) { ?>
<tr>
<td><a href="#" name="<?php echo $result['recipe_id']; ?>"><?php echo $result['recipe_id']; ?></a></td>
<td><?php echo $result['title']; ?></td>
<td><?php echo $result['ingredients']; ?></td>
<td><?php echo $result['recipe']; ?></td>
</tr>
<?php }; ?>
</table>
</body>
这是我的js（script.js）：
$(document).ready(function () {
var myText;
$("a").click(function(){
myText = $(this).text();
ajax_post(myText);
});
function ajax_post(myText){
var hr = new XMLHttpRequest();
var url = "recipe_result.php";
var passedVal = myText;
var myVal = "recipe_id=" + myText;
hr.open("POST", url, true);
hr.setRequestHeader("Content_type","application/x-www-form-urlencoded");
hr.onreadystatechange = function () {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(myVal);
};
});
这是recipe_result.php：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<?php
if(isset($_POST['recipe_id'])){
echo "SET";
} else {
echo "NOT SET";
}
?>
<div id="status"></div>
</body>
</html>
用户将单击锚标记（recipe_summary.php），该标记将触发 script.js 上的单击事件，该事件将存储recipe_ID（这就是我迷失的地方）并将其传递给 ajax_post()。从这里我尝试将存储的变量作为 php 变量发送到“recipe_result.php”，然后我将在 MySQL 中使用该变量仅返回选定的记录。
在recipe_result.php $_POST['recipe_id'] 上未设置，所以我不确定我的错误在哪里。
我不熟悉 ajax，但从我读过的内容来看，ajax 似乎是解决方案。我看过很多教程（ajax_post() 中的所有内容都来自我试图遵循的教程），但通常它们从 HTML 表单开始，然后将结果写入同一页面。
