How to get api data using jQuery AJAX?

Question

In this code I have a normal dropdown where I have some city name. Now, what I actually want when I change any city then through jQuery I want to get JSON data in my alert box which is not working yet. I don't know why.

So, how can I do this?

Here is my code:

$(document).ready(function() {
  $("#city").change(function() {
    name = $(this).val();
    console.log(name);
    $.ajax({
      type: "POST",
      dataType: "json",
      data: {
        "name": name
      },
      url: "http://postalpincode.in/api/postoffice/" + name,
      success: function(data) {
        console.log(data);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="city" id="city">
  <option value="">Select City</option>
  <option value="delhi">delhi</option>
  <option value="ghaziabad">ghaziabad</option>
  <option value="noida">noida</option>
  <option value="meerut">meerut</option>
</select>

The site you're trying to request seems broken. ERR_CERT_COMMON_NAME_INVALID — CertainPerformance
– CertainPerformance, Commented Sep 18, 2018 at 5:14
Show us what happens on the PHP side. Try var_dump($_POST); to make sure PHP is receiving the data. — IcedAnt
– IcedAnt, Commented Sep 18, 2018 at 5:14
1. I am unable to see any jQuery library added.2 check your browser console tab to see that any error occur or not?3. instead of alert(data); do console.log(data); and check any data coming or not? (again check browser console tab) — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Sep 18, 2018 at 5:14
jsfiddle.net/qy4kfj0m/16 Mixed Content: The page at 'https://fiddle.jshell.net/_display/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://postalpincode.in/api/postoffice/noida'. This request has been blocked; the content must be served over HTTPS. — Mohammad
– Mohammad, Commented Sep 18, 2018 at 5:15
if your site is https, then trying to load a http url (http://postalpincode.in/api/postoffice/) will fail — Sean
– Sean, Commented Sep 18, 2018 at 5:16

Praveen Kumar · Accepted Answer · 2018-09-18 06:22:15Z

5

Please check below code

<select name="city" id="city">
    <option value="">Select City</option>
    <option value="delhi">delhi</option>
    <option value="ghaziabad">ghaziabad</option>
    <option value="noida">noida</option>
    <option value="meerut">meerut</option>
</select>

Ajax Called

<script>
    $(document).ready(function(){
        $("#city").change(function(){
            name = $(this).val();
            /*For PHP called is for Cross-Origin Request Blocked*/
            $.ajax({
               type:"GET",
               dataType: "json",
               data:{name: name},
               url:"test.php",
               success:function(data)
               {
                   alert('Get Success');
                   console.log(data);
               }
            });
        });
    });
</script>

PHP file code for Cross-Origin Request Blocked -

<?php 
$name_city = rawurlencode($_GET['name']);
$url = "http://postalpincode.in/api/postoffice/".$name_city;
$curl_handle=curl_init();
curl_setopt($curl_handle, CURLOPT_URL,"$url");
curl_setopt($curl_handle, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_handle, CURLOPT_HEADER, false);
$postoffice_data = curl_exec($curl_handle);
curl_close($curl_handle); 
$postoffice_data = json_decode($postoffice_data);
echo json_encode($postoffice_data);
exit;
?>

answered Sep 18, 2018 at 6:22

Praveen Kumar

9272 gold badges9 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rudra Over a year ago

But I want to know that how to get data after success. I am using

var myObj = $.parseJSON(data); 				   myObj.PINCode;                    alert(data);                    console.log(data);

which is not working.

Praveen Kumar Over a year ago

@Rudra Update this code in PHP file $postoffice_data = json_decode(json_encode($postoffice_data)); echo json_encode($postoffice_data);

Rudra Over a year ago

I got solution @PraveenKumar. Thank you so much for reply

Collectives™ on Stack Overflow

How to get api data using jQuery AJAX?

Here is my code:

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is my code:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related