Question

我相信这应该是微不足道的，但我根本无法弄清楚。我正在做一个小测试，发送一个AJAX请求，并回显从下拉菜单中提取的变量。

然而，它似乎并没有执行任何事情。我想知道是否有人可以帮助我指出什么是错的？

以下是 index.php ：

的相关摘要

<html>
    <?php

    //create a drop down of available accounts
                echo 'Available Accounts: ';

                echo '<select name=dropAccounts class=dropAccounts>';
                //if there is at least one account available
                if (count($accsAvailable) > 0) {
                    echo '<option value=0>---Select an account---</option>'; //default option
                    foreach ($accsAvailable as $account) {
                        //populate from API
                        echo '<option value=' . $account->getId() . '>' . $account->getName() . '</option>';
                    }
                } else {
                echo '<option value=0>---No accounts---</option>'; //else if no accounts exist
            }
            echo '</select>';

            //for available webproperties
            echo '<br> Available Webproperties: ';
            echo '<select name=dropProperties class=dropProperties>';
            echo '<option selected=selected>---Select a webproperty---</option>';
            echo '</select>';

    ?>
</html>

从片段中删除的重要一点是，第一个下拉菜单称为“dropAccounts”。

这是我的 JS脚本，用于处理'dropAccounts'上的onchange事件：

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".dropAccounts").change(function()
        {
            var id=$(this).val();
            var dataString = 'id='+ id;

            $.ajax
            ({
                type: "POST",
                url: "propertyID.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $(".dropProperties").html(html);
                } 
            });

        });

    });
</script>

我最终打算使用从'dropAccounts'中获取的值来填充第二个下拉菜单'dropProperties'，但它甚至没有在我的PHP脚本中回显。

propertyID.php ：

<?php

if($_POST['id'])
{
    $accountID = $_POST['id'];
    echo $accountID;
}

?>

我按照此处找到的教程：http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html

Answer 1

根据我所看到的问题如下：

var dataString = 'id='+ id;
data: dataString

您需要以下列方式发送数据;

data : {
         'id' : id
       }

它应该以正确的格式向您发送数据。

编辑： 我添加此内容以阐明代码的外观。

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".dropAccounts").change(function()
        {
            var id=$(this).val();

            $.ajax
            ({
                type: "POST",
                url: "propertyID.php",
                data: {
                         'id' : id
                },
                cache: false,
                success: function(html)
                {
                    $(".dropProperties").html(html);
                } 
            });

        });

    });
</script>

Answer 2

您生成的HTML无效。每个类和名称都应在引号内。

更改index.php

像这样：

<html>

    <?php

    //create a drop down of available accounts
    echo 'Available Accounts: ';

    echo '<select name="dropAccounts" class="dropAccounts">';
    //if there is at least one account available
    if (count($accsAvailable) > 0) {
        echo '<option value="0">---Select an account---</option>'; //default option
        foreach ($accsAvailable as $account) {
            //populate from API
            echo '<option value="' . $account->getId() . '">' . $account->getName() . '</option>';
        }
    } else {
        echo '<option value="0">---No accounts---</option>'; //else if no accounts exist
    }
    echo '</select>';

    //for available webproperties
    echo '<br> Available Webproperties: ';
    echo '<select name="dropProperties" class="dropProperties">';
    echo '<option selected=selected>---Select a webproperty---</option>';
    echo '</select>';

    ?>

</html>

你应该追加ajax成功回调：

$(".dropProperties").append(html);

Answer 3

这里有几个问题！

为了易读性和语法高亮（更不用说它会提醒你的错误）你应该使用直接的html输出而不是用php回显它。

而不是

echo '<select name=dropAccounts class=dropAccounts>';

试

//End php parsing with a closing php tag
?> 
<select name=dropAccounts class=dropAccounts> 
<?php 
//Resume php parsing

这引起了人们的注意，即您没有用引号

包围属性值

而不是

<select name=dropAccounts class=dropAccounts>

引用属性非常重要：

<select name="dropAccounts" class="dropAccounts">

接下来是您尝试使用以下代码将服务器的输出（原始STRING）插入到select元素中：

success: function(html) {
    $(".dropProperties").html(html);
}

我相信这就是你想要的：

success: function(html) {
    var newOption = $('<option value="' + html + '">' + html + '</option>');
    $(".dropProperties").append(newOption);
}

根据html规范，只有选项元素应该是select元素的子元素。为了在select元素中添加一个字符串，我的代码创建了一个新的选项元素，使其文本成为“html”字符串，并将该选项元素插入到select元素中。

希望这有帮助！

为什么我的AJAX代码不起作用？

3 个答案: