為什么我的AJAX代碼不起作用？

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規范，只有option元素應該是select元素的子元素。 為了將字符串添加到select元素中，我的代碼創建了一個新的option元素，將其文本設置為“ html”字符串，並將該option元素插入到select元素中。

希望這可以幫助！

為什么我的AJAX代碼不起作用？

問題描述

3 個解決方案

解決方案1
0 已采納 2014-05-08 18:50:43

解決方案2
0 2014-05-08 18:53:31

解決方案3
-1 2014-05-08 18:56:31

為什么我的AJAX代碼不起作用？

問題描述

3 個解決方案

解決方案1 0 已采納 2014-05-08 18:50:43

解決方案2 0 2014-05-08 18:53:31

解決方案3 -1 2014-05-08 18:56:31

解決方案1
0 已采納 2014-05-08 18:50:43

解決方案2
0 2014-05-08 18:53:31

解決方案3
-1 2014-05-08 18:56:31