php - 使用 PHP 和 AJAX 的链表

标签 php html ajax

我在用 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
...

我有一个采用项目名称和 ID 的 HTML SELECT,这在选择 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>
...

很抱歉提出这个大问题,但我在这个问题上浪费了很多时间,而且我不知道会发生什么。 谢谢!

最佳答案

让我们看一下您拥有的和想要做的事情的分割。首先,您有一个空的 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 响应脚本中(包括任何需要的数据库操作和基于 POST arg 值从数据库中提取数据等)...或者,您可以添加 exit; 在你的 echo $output; 之后......只要在这个 if block 之前没有其他额外的 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
}

关于php - 使用 PHP 和 AJAX 的链表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50604817/

相关文章:

php - 在 Aptana Studio 3 PHP 编辑器中启用 "Open Declaration"

css - 图片下的文字,我希望它不可见,但我希望能够找到它

html - CSS子元素不继承父元素高度

html - 为什么我的 <li> 没有得到 "active"?

javascript - 在 jQuery 的 AJAX 响应中获取请求数据

javascript - JSF/PrimeFaces ajax 更新打破了 jQuery 事件监听器函数绑定(bind)

php - 检查用户是否是管理员

php - CakePHP 前端/后端应用程序开发

php - 使用 ajax/jquery 将图像上传到文件夹

javascript - 返回 false 不起作用,但警报起作用