Question

我有index.php页面，我想在其中有两个“选择”元素。但是，我希望从第一个“选择”元素中选择一个选项后显示第二个“选择”元素，并且第二个“选择”元素将始终包含基于在第一个元素中选择的内容的不同选项。这两个元素都从MySql数据库读取数据。因此，我创建了另一个名为script.php的页面，该页面将保留第二个元素，直到选择第一个元素为止，然后使用jquery .load（）将其加载到第一个元素的旁边。但是我需要使用AJAX请求将值从第一个元素传输到该script.php，以便它可以返回带有特定选项的第二个元素。当我分别测试每个部分时，它工作正常（ajax请求正在将数据传递到script.php，当选择#first元素时正在加载script.php，当我自己打开script.php页面时，它以方式提供#second它应该是）。但是当我将所有这些放在一起描述时，我得到了#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元素。

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

1 个答案: