javascript - AJAX 未从 PHP 脚本返回预期输出

Question

我有index.php页面，我想在其中有两个“选择”元素。但是，我希望在从第一个元素中选择一个选项后显示第二个“选择”元素，并且第二个“选择”元素将始终包含基于第一个元素中选择的内容的不同选项。两个元素都从 MySql 数据库读取数据。因此，我创建了另一个名为 script.php 的页面，它将保留第二个元素，直到选择第一个元素为止，并使用 jquery .load() 它将加载它紧邻第一个元素。但我需要使用 AJAX 请求将值从第一个元素传输到 script.php，以便它可以返回具有特定选项的第二个元素。当我单独测试每个部分时，它工作正常(ajax请求将数据传递给script.php，当选择#first元素时，script.php正在加载，当我自己打开script.php页面时，它给出了#second)它应该是)。但是，当我按照下面的描述将所有这些放在一起时，我得到了#第二个元素，其中没有任何选项。

这是index.php

//this is first select element and it works fine

echo '<select id="first">';
$data = $conn->query("SHOW TABLES FROM something");
while ($row = mysqli_fetch_array($data)) {
echo '<option>' . $row[0] . '</option>';
}
echo '</select>';

// this is placeholder for second select element
<div id="placeholder"></div>

这是 script.php:

// this variable will hold selected option from ajax request
$selected = $_POST['selectedOption'];
// this is second element and it works fine when it's not called from another page
echo '<select id="second">';
$data = $conn->query("SELECT * TABLES FROM $selected");
while ($row = mysqli_fetch_array($data)) {
echo '<option>' . $row['column'] . '</option>';
}
echo '</select>';

这是 ajax.js 文件

$(document).ready(function(){

$(document).on("change", '#first', function(event) {

// grabbing value of first element 
var selectedOption = $('#first option:selected').val();


$.ajax({
    type: 'POST',
    url: 'script.php',
    data: "selectedOption=" + selectedOption,
    cache: false

});

//calling #second element to show up (script.php) in this case

$('#placeholder').load("script.php");

});
});

希望我能够解释我的问题，以便您能够理解。有任何想法吗？我做错了什么？

Answer 1

$.ajax({
    type: 'POST',
    url: 'script.php',
    data: "selectedOption=" + selectedOption,
    cache: false
    success: function(result) {
        $("#placeholder").html(result);
    }
});

Ajax 调用是异步的，您希望在数据返回后设置第二个 select 元素。