AJAX似乎是发送整个网页脚本而不是数据

Question

我的AJAX请求遇到了麻烦，我不确定原因。 以下代码似乎发送到整个网页脚本（如我的警报框和控制台中所示）而不是我的复选框值。 谁能向我解释我做错了什么？ 这是我的PHP复选框，其中包含由SQL生成的值，并且没有提交按钮，因此代码设置为在用户更改时运行：

<form id="numberOrderForm" action="testdatabase.php" method="post">
   <div class="wrappers" id="multi-select1Wrapper">
        <h2>Area Code</h2>
        <select class="dropDownMenus" id="multi-select1" name="multi_select1[]" multiple="multiple">
            <?php
                //The query asking from our database
                $areaCodeSQL = "SELECT ac.Number AS `AreaCode`, ac.Name AS `AreaName`
                                FROM `AreaCodes` ac";                                                               //SQL query: From the table 'AreaCodes' select 'Number' and put into 'AreaCode', select Name and put into 'AreaName'

                $areaCodeResults = $conn->query($areaCodeSQL);                                                      // put results of SQL query into this variable

                if ($areaCodeResults->num_rows > 0) {                                                               // if num_rows(from $results) is greater than 0, then do this:
                    // output data of each row
                                foreach($areaCodeResults as $areaCodeResult)                                        //for each item in $areCodeResults do this:
                                    {
                                        $areaNameAndCode =  $areaCodeResult['AreaCode'] ." ". $areaCodeResult['AreaName'];  //get AreaCode and AreaName from query result and concat them
                                        $areaName = $areaCodeResult['AreaName'];                                    // get AreaName
                                        $areaCode = $areaCodeResult['AreaCode'];                                    //get AreaCode

                                        ?><option class="menuoption1" name="menuAreaCode" value="<?php echo $areaCode ?>"  ><?php echo $areaNameAndCode; ?></option><?php  //Create this option element populated with query result variables
                                    }
                } 

            ?>
        </select>
    </div>
</form>

这是我的jQuery AJAX代码：

<script>
        $('#multi-select1').on("change", function(){
            var areaCode = $(this).val();

            $.ajax({
                type:"POST",
                url: "testdatabase.php", //my PHP database
                data: "areacode=" + areaCode,
                success: function(response){
                //do stuff after the AJAX calls successfully completes
                    alert (response);
                    console.log(response);
                },
                error : function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        });

</script>

Answer 1

你的数据不正确。

更换：

data: "areacode=" + areaCode,

有：

data: {"areacode": areaCode},

您还应该在表单元素中添加： enctype='multipart/form-data'

Answer 2

请在jquery ajax调用上添加以下行

dataType: 'json'
contentType: "application/json",

添加上面的代码后，您的代码如下所示

<script>
        $('#multi-select1').on("change", function(){
            var areaCode = $(this).val();

            $.ajax({
                type:"POST",
                url: "testdatabase.php", //my PHP database
                data: "areacode=" + areaCode,
                dataType: 'json',
                contentType: "application/json",
                success: function(response){
                //do stuff after the AJAX calls successfully completes
                    alert (response);
                    console.log(response);
                },
                error : function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        });

</script>