无法获得下拉框以自动填充Ajax PHP

我正在尝试设置一种表格，客户可以在其中输入他们从我的网站订购的商品的运输信息。我运送到美国和加拿大，所以我想让他们从国家下拉框中选择"美国"或"加拿大"，然后使用Ajax和PHP创建一个选择的选项列表/省份选定的国家没有重新加载页面。

到目前为止我的代码：

<?php
require_once 'includes/functions.php';
include_once 'header.php';
?>
<h1>Shipping Information</h1>
<p>Please use the form below to add a shipping address to your account.  You MUST have a shipping address on file to be able to access our store.  For a list of accepted state/provice and country codes, please visit <a href="https://www.ups.com/worldshiphelp/WS14/ENU/AppHelp/Codes/State_Province_Codes.htm" target="_blank">here</a>.  We only ship to the United States and Canada at this time.</p>
<div id="form">
<form action="" method="post">
<table cellspacing="2" cellpadding="2" width="550">
    <tr>
        <th colspan="2">Add Shipping Address</th>
    </tr>
    <?php
    if($error)
    {
        echo '<tr><td colspan="2">';
        echo $error;
        echo '</td></tr>';
    }
    ?>
    <tr>
        <td align="right"><label for="fname">First Name</label></td>
        <td><input type="text" name="fname" /></td>
    </tr>
    <tr>
        <td align="right"><label for="lname">Last Name</label></td>
        <td><input type="text" name="lname" /></td>
    </tr>
    <tr>
        <td align="right"><label for="addr1">Address</label></td>
        <td><input type="text" name="addr1" /></td>
    </tr>
    <tr>
        <td align="right"><label for="addr2">Apt/Suite/Unit</label></td>
        <td><input type="text" name="addr2" /></td>
    </tr>
    <tr>
        <td align="right"><label for="city">City</label></td>
        <td><input type="text" name="city" /></td>
    </tr>
    <tr>
        <td align="right"><label for="cc">Country</label></td>
        <td>
            <select name="cc" id="cc">
                <option value="">Select One...</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right"><label for="sp">State/Province</label></td>
        <td id="response"></td>
    </tr>
    <tr>
        <td align="right"><label for="pcode">Postal Code</label></td>
        <td><input type="text" name="pcode" /></td>
    </tr>
    <tr>
        <td align="right"><label for="active">Set Default</label></td>
        <td><input type="checkbox" name="active" /></td>
    </tr>
    <tr>
        <td colspan="2"><hr /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Add Address" /></td>
    </tr>
</table>
</form>
</div>
<script>
$("#cc").on("change",function(){
    var selected = $(this).val();
    $.ajax({
        type:POST,
        url:"process-request.php",
        data: { cc : selected },
        contentType:"application/json; charset-utf-8",
        dataType:"json",
        async:false,
        success: ccSuccess,
        error: AjaxFailed
    });
});
function ccSuccess(result)
{
    $("#response").html(result);
}
function AjaxFailed(result)
{
    $("#response").html("<p class='error'>Failed to Load State/Province Codes</p>");
}
</script>
<?php
include_once 'footer.php';
?>

我的process-request.php文件：

<?php
// process-request.php
if(isset($_POST['cc']))
{
    $country = $_POST['cc'];
    $countryArr = array(
        "US" => array(
        'AL',
        'AK',
        'AZ',
        'AR',
        'CA',
        'CO',
        'CT',
        'DE',
        'DC',
        'FL',
        'GA',
        'HI',
        'ID',
        'IL',
        'IN',
        'IA',
        'KS',
        'KY',
        'LA',
        'ME',
        'MD',
        'MA',
        'MI',
        'MN',
        'MS',
        'MO',
        'MT',
        'NE',
        'NV',
        'NH',
        'NJ',
        'NM',
        'NY',
        'NC',
        'ND',
        'OH',
        'OK',
        'OR',
        'PA',
        'RI',
        'SC',
        'SD',
        'TN',
        'TX',
        'UT',
        'VT',
        'VA',
        'WA',
        'WV',
        'WI',
        'WY'
        ),
        "CA" => array(
        'AB',
        'BC',
        'MB',
        'NB',
        'NL',
        'NT',
        'NS',
        'NU',
        'ON',
        'PE',
        'QC',
        'SK',
        'YT'
        )
    );
    if($country !== 'Select One...')
    {
        echo "<select name='sp'>";
        foreach($countryArr[$country] as $value)
        {
            echo "<option value='".$value."'>".$value."</option>";
        }
        echo "</select>";
    }
}
?>

我的header.php and footer.php仅包含页面布局的格式divs，以及CSS和JavaScript HREF的链接" http://ajax.googleapis.com/ajax/ajax/ajax/libs/libs/jquery/1.10.10.10.10.10.10.10.10.10.10.10.2/jquery.min.js"。

我不知道缺少什么，或者我做错了什么，因为这是我第一次与JavaScript打交道，我尝试了几个有关如何执行此操作的教程，当我更改时，所有这些都无法使用选择。

如果我更改了国家/地区的选择，则没有任何更新的州/省部分，#Response。

更新：我能够使所有内容都可以使用以下代码段：

<div id="form">
<form action="" method="post">
<table cellspacing="2" cellpadding="2" width="550">
    <tr>
        <th colspan="2">Add Shipping Address</th>
    </tr>
    <?php
    if($error)
    {
        echo '<tr><td colspan="2">';
        echo $error;
        echo '</td></tr>';
    }
    ?>
    <tr>
        <td align="right"><label for="fname">First Name</label></td>
        <td><input type="text" name="fname" /></td>
    </tr>
    <tr>
        <td align="right"><label for="lname">Last Name</label></td>
        <td><input type="text" name="lname" /></td>
    </tr>
    <tr>
        <td align="right"><label for="addr1">Address</label></td>
        <td><input type="text" name="addr1" /></td>
    </tr>
    <tr>
        <td align="right"><label for="addr2">Apt/Suite/Unit</label></td>
        <td><input type="text" name="addr2" /></td>
    </tr>
    <tr>
        <td align="right"><label for="city">City</label></td>
        <td><input type="text" name="city" /></td>
    </tr>
    <tr>
        <td align="right"><label for="cc">Country</label></td>
        <td>
            <select name="cc" id="country">
                <option value="">Select One...</option>
                <?php
                $sql = $db->query('SELECT * FROM country');
                if(is_object($sql) && $sql->num_rows > 0)
                {
                    while($row = $sql->fetch_array())
                    {
                        echo '<option value="'.$row['id'].'">'.$row['cn'].'</option>';
                    }
                }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right"><label for="sp">State/Province</label></td>
        <td><select name="sp" id="state"><option>Select One...</option></select></td>
    </tr>
    <tr>
        <td align="right"><label for="pcode">Postal Code</label></td>
        <td><input type="text" name="pcode" /></td>
    </tr>
    <tr>
        <td align="right"><label for="active">Set Default</label></td>
        <td><input type="checkbox" name="active" /></td>
    </tr>
    <tr>
        <td colspan="2"><hr /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Add Address" /></td>
    </tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#country").change(function(){
        var country_id = $(this).val();
        if(country_id != ""){
            $.ajax({
                url:"get-states.php",
                data: {c_id:country_id},
                type:"POST",
                success:function(response){
                    var resp = $.trim(response);
                    $("#state").html(resp);
                }
            });
        } else {
            $("#state").html("<option value=''>Select One...</option>");
        }
    });
});
</script>
<?php
require_once 'includes/functions.php';
if(isset($_POST['c_id']))
{
    $sql = $db->query('SELECT * FROM states WHERE ccid = "'.$_POST['c_id'].'"');
    if(is_object($sql) && $sql->num_rows > 0)
    {
        echo '<option value="">Select One...</option>';
        while($row = $sql->fetch_array())
        {
            echo '<option value="'.$row['id'].'">'.$row['sname'].'</option>';
        }
    }
    else
    {
        echo '<option value="">ERROR</option>';
    }
}
else
{
    redirect('./');
}
?>

我将所有状态/省份和国家转换为我的MySQL数据库中的条目，并且在上面的查询中，它现在起作用。我还必须手动将jquery.min.js文件下载到我的JS文件夹中才能使其实际工作，因为它不想读取远程文件。

问题可能与您的Ajax调用有关。您指定：

    contentType:"application/json; charset-utf-8",
    dataType:"json",

您正在从PHP页面发送回HTML。尝试一下。/echo/html/和其他编辑适用于jsfiddle。只需将您的旧值放回，更改数据类型并取出ContentType即可。

$("#cc").on("change",function(){
    var selected = $(this).val();
    $.ajax({
        type:"POST",
        url:"process-request.php",
        data: { cc : selected },
        dataType:"html",
        async:false,
        success: ccSuccess,
        error: AjaxFailed
    });
});
function ccSuccess(result)
{       alert(result);
    $("#response").html(result);
}
function AjaxFailed(result)
{
    $("#response").html("<p class='error'>Failed to Load State/Province Codes</p>");
}

尝试一下。

在PHP脚本中执行return json_encode($countryArr[$country])。删除回声部分。

function ccSuccess(result)
{       
 alert(result);
var country = JSON.parse(result);
var html = "";
   html += "<select name='sp'>";
    for(var i =0; i < country.length; i++)
    {
        html +="<option value='"+ country[i] +"'>"+ country[i] +"</option>";
    }
    html += "</select>";
    $("#response").html(html);
}

dataType:"json",您需要删除此行，因为您不从process-request.php返回JSON，它只是返回HTML代码。

相关内容

最新更新

热门标签：