$ .ajax不执行

                <div class="grid--cell fl1 lh-lg">
                    <div class="grid--cell fl1 lh-lg">
                        This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time,   or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making   this question more broadly applicable, <a href="/help/reopen-questions">visit the help center</a>.

                    </div>
                </div>
            </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2012-10-22 07:16:10Z" class="relativetime">7 years ago</span>.</div>
        </div>
    </aside>

I have a $.ajax code where it triggers when a certain Id is clicked, then, with each click, it queries in a database. My problem is, my other ajax function doesn't work.

alert("Test");
$.ajax({
   type : 'GET',
   url : 'city.php',
   dataType : 'json',
   data: {
       region : $('#province').val()
   },
   success : function(data_1){
      $("#city").append("<option value=''>Select City</option>");
      for (var i = 0; i < data.province.length; i++) {
         if(data_1.city[i] != null)
         $("#city").append("<option value="+data_1.id[i]+">" + data_1.province[i]+"</option>");
   }
}

This code is working on my localhost I have no problem with it but when I upload it in my web host its not querying anymore and populating my dropdown.

</div>