使用 PHP 和 AJAX 的链表答案

【问题标题】：Linked list with PHP and AJAX使用 PHP 和 AJAX 的链表
【发布时间】：2018-05-30 12:34:23
【问题描述】：

我在用 HTML 制作链表时遇到了麻烦，让我解释一下：

在 HTML 中我有这两个选择：

<!-- This select WORKS and read the opened projects from de database  -->
            <select name="project" id="project">
                <option value="0">Select a project</option>
                <?php if (isset($result2)): ?>
                    <?php foreach ($result2 as $res): ?>
                        <option value=<?php echo $res['c_project_id'] ?>><?php echo $res['d_name'] ?></option>
                    <?php endforeach ?>
                <?php endif ?>

            </select>

<!-- This doesn't work, but I want: When I select a project, the project's categories go here -->
                <select name="category" id="category">

                </select>

真正的数据是下一个：表项目

c_project_id | d_name | d_description | n_budget | d_state
      1      |  Test  |  Test Project |    100   |  Open
      2      |  Web   |    Web APP    |   3000   |  Open
      3      | C Test |Closed Project |    100   | Closed
      4      | Certif.| Certificates  |   2500   |  Open

表格类别（与表格项目相关）

c_category_id | d_name | d_description | c_project_id
     1        | General| General cat   |      1
     2        | Test   | Test cat      |      1
     3        | General| General cat   |      2
     4        | General| General cat   |      3
     5        | Nothing| Nothing cat   |      3
     6        |Program | Programming   |      2
...

我在 html 中有一个选择项目名称和 ID，这适用于选择 nº1

$statement2 = $conexion->prepare("SELECT c_project_id, d_name FROM project WHERE d_state= 'Open'");
$statement2->execute();
$resultado2 = $statement2->fetchAll();

现在我想要：当我在第一个选择中“单击”时，第二个选择做出声明并完成第二个选择。为了测试，我只写了一个简单的选项。我尝试使用 AJAX 和 PHP，但第二个选项为空：

AJAX：

$( "#project" ).change(function() {
      var select = $( "#project option:selected" ).val();
      console.log(select); //just for testing that I took the value.
      $.ajax({
            type: "POST",
            url: "phpPage.php",
            data: { selectedProject : select } 
        }).done(function(data){
            console.log("Done");
            $("#category").html(data);
        });
    });

和 PHP：

if(isset($_POST["selectedProject"])){
        $proy = $_POST["selectedProject"];
        $output = "<option value='100'> Select your category </option>";

        if($proy != 0){
            $output.= "<option>" . $proy . "</option>"; 
        }

        echo $output;   
    }

但这并没有给我任何回报，一切都是空的。

最后，当我尝试调试时，我注意到在其中一个 PHP 响应中，HTML 代码 () 写在页面的开头（在响应中）：

<option value='100'> Select your category </option><option>1</option> 
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
...

很抱歉这个大问题，但我在这个问题上浪费了很多时间，我不知道会发生什么。谢谢你！

【问题讨论】：

由于您只需要 option 标签的基本 html，因此您不再需要 html。所以在echo $output;之后添加一个exit;
更多信息.success（或成功：选项）与.done ... stackoverflow.com/a/8840315/2960971
@AliSheikhpour 这是完全错误的。 .done() 是请求成功时调用的 jQuery Deferred / Promise 接口（$.ajax() 返回一个 Deferred 对象）的正确方法。毫无疑问，您会想到“成功”回调，它是在调用 $.ajax() 时作为选项提供的。 Deferred 接口不公开任何名为“success()”的方法。写之前检查文档...api.jquery.com/jquery.ajax和api.jquery.com/category/deferred-object。 OP 代码的特定方面没有任何问题。
无论如何关于你的问题......“你能解释一下为什么吗”，请参阅最近发布的 IncredibleHat 的答案。您正在使用相同的 PHP 脚本来输出 ajax 调用和主页所需的位。将它们混合在一起通常是一个糟糕的设计，但如果你小心，你可以。更改起作用的原因是因为 exit 停止了您的脚本运行，因此停止了它吐出许多其他用于加载主页的 HTML，而不是作为 ajax 调用输出的一部分。跨度>
我倾向于有一个子目录，里面装满了用于 ajax 调用的“小脚本”。但有时当我有点懒惰（或速度太快）时，我会将 ajax 反应代码放在我正在处理的一些大脚本的最顶端附近（只是为了让事情顺利进行）......然后稍后猛拉当我确定事情的时候，最上面的部分会放入它自己的文件中。要掌握的主要内容是 ajax 通常用于“操作当前的 html 文档”......所以您只需要使用 json 数据，或使用大块 html 插入/替换部分。

标签： php html ajax

【解决方案1】：

让我们看看您拥有和想要做的事情的细分。首先，你有一个空的select 元素：

<select name="category" id="category">
    // empty
</select>

然后，您将触发从 PHP 中返回数据的 ajax 调用。这个 ajax 只是从 PHP 中获取所有返回的 html 并将其放在上面select 的中间：

$("#category").html(data);

您的 PHP 是您在输出中创建过多信息的地方。这通常是将“ajax php 脚本”与正常的完整 html 构建 php 脚本隔离开来的好主意。这样您就只输出该特定 ajax 调用所需的内容。

在你上面的 PHP 中，你有：

if(isset($_POST["selectedProject"])){
    $proy = $_POST["selectedProject"];
    $output = "<option value='100'> Select your category </option>";
    if($proy != 0){
        $output.= "<option>" . $proy . "</option>"; 
    }
    echo $output;
}
// you must have more page generation below this based on your Q (?)

您可以将上述代码隔离到一个新的 ajax 响应脚本中（包括任何需要的 db 操作和根据 POST arg 值从数据库中提取数据等）.... 或者，您可以添加 exit;在您的 echo $output;... 之后，只要在此 if 块之前没有输出其他额外的 html。

if(isset($_POST["selectedProject"])){
    $proy = $_POST["selectedProject"];
    $output = "<option value='100'> Select your category </option>";
    if($proy != 0){
        $output.= "<option>" . $proy . "</option>"; 
    }
    echo $output;
    exit; // <-- halt so none of the other following html spills out
}

【讨论】：

非常感谢，我想明白了。太棒了