如何解决Ajax身份不明的索引

Question

I have looked over my code and it appears that city_id is set by ajax and I can't see why I am still getting undefined index. I've looked at this for too many hours now. Please help me find the reason for this.

edit to add ad. info.: this script populates selection boxes for country,state,city,zipcode from mysql db. all are working except the last zipcode box. if i set city_id explicitly in ajaxData.php it works, that's why i know i'm missing something.

address.php

</select>
<select name="city_id" id="city_id">
<option value="">Select state first</option>
</select>

<select name="zipcode" id="zipcode">
<option value="">Select city first</option>

<script>

$('#city_id').on('change',function(){
var cityID = $(this).val();
if(cityID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:{city_id: cityID},
//data format changed as per suggestion.
dataType:'html',

success:function(html){
$('#zipcode').html(html);
console.log(html);
}
});

}else{

$('#zipcode').html('<option value="">Select city first</option>');
}
});
</script>

ajaxData.php

<?php
$city_id=$_POST['city_id'];
if(isset($_POST["city_id"]) && !empty($_POST["city_id"])){

//Get all zipcode data
$query =mysqli_query($conn, "SELECT * FROM zipcodes WHERE city_name = 
'$city_id' AND status = 1 ORDER BY zipcode ASC");
$num_rows = mysqli_num_rows($query);
if($num_rows > 0){
echo '<option value="">Select zipcode</option>';
while($row = $query->fetch_assoc()){

echo '<option value="'.$row['zipcode'].'">'.$row['zipcode'].'</option>';

}
}elseif($num_rows = 0){

echo '<option value="">Zipcode not available</option>';

}}
?>

Answer 1

I think you are setting the data wrong on your ajax request. Try setting it as an object like :

    $.ajax({
      type:'POST',
      url:'ajaxData.php',
      data:{city_id :cityID},
      dataType:'html',

Answer 2

The issue here is the way you post your data; you are doing the following in your AJAX;

data:'city_id='+cityID,

You need;

data: { city_id: cityID },

This is because the data is an object of references, not a query string

For all intent and purpose if you wanted to use the query string, you could have;

url:'ajaxData.php?city_id=' + cityID,

However, I personally advise against this as it could be piggybacked onto but this is not definitely going to happen

Answer 3

You can try this

$.post('ajaxData.php', { city_id: cityID })
  .success(function(html) {
    ...
  });

Do not use data as string, you will have to escape all the values. You should always debug the received values on PHP level. At least you can always dump POST content and see what you exactly received.

Do not forget the user values when you are sending them to database or you application would be pretty easily hackeable.

Answer 4

after some deeper troubleshooting i found out my javascript variable "cityID" was equal to "11". i'm not sure why that would be undefined. 11 represented the cityid which was the selection option's value not the display text which was "anchorage". i changed mysql statement so that city_name was the option value and then my zipcode selection box populated correctly.