unable to fetch json data from ip url

Question

hey guys i am unable to fetch cross domain json data here is my code below which doesn't work

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="js/jquery.min.js"></script>
</head>
<body>

<div id="images"></div>

<script>
(function() {
  var furl= "http://192.168.2.36/gemadmin/display.php?callback=?";
  $.getJSON( furl)
    .done(function( data ) {
      console.log(data);
    });
})();
</script>

</body>
</html>

and this code works properly since its just localhost

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="js/jquery.min.js"></script>
</head>
<body>

<div id="images"></div>

<script>
(function() {
  var furl= "http://localhost/gemadmin/display.php";
  $.getJSON( furl)
    .done(function( data ) {
      console.log(data);
    });
})();
</script>

</body>
</html>

why is the first version not working ? and what is the solution to make it work?

server code(display.php)

<?php
    include 'config.php';
    $sql = "select * from menu;";
    $result= $mysqli->query($sql);
    $data = $result->fetch_all( MYSQLI_ASSOC );
    header('Content-Type: application/json');
    echo json_encode( $data );
    ?>

The answer: Found the answer instead of $.getJSON() use $.get and do a json parse example jQuery.getJSON demo img { height: 100px; float: left; }

<div id="images"></div>

<script>
(function() {
  var furl= "http://localhost/gemadmin/display.php?callback=?";
  $.get( furl)
    .done(function( data ) {
      var obj = JSON.parse(data);
      console.log(obj);
    });
})();
</script>

</body>
</html>

don't forget to add 'callback=?'to your url

simply because your accessing `admin` data, that request is invalid unless you are logged-in in the other site. — Viscocent, May 23 '14 at 05:47
You have found the cause already: "_i am unable to fetch cross domain json data_". Cross domain Ajax requests are not permitted unless you set the appropriate CORS headers. There are plenty discussions for this already if you search for the terms "ajax" and "cors". — NilsH, May 23 '14 at 05:50

score 0 · Answer 1 · answered May 23 '14 at 05:51

Use Like This

            $.ajax({
                    url: "URL",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify("YOUR JSON"),
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },

                    error: function (x, e) {
                        alert('Failed');
                        alert(x.responseText);
                        alert(x.status);
                    }
                });

score 0 · Answer 2 · answered May 23 '14 at 05:53

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("demo_ajax_json.js",function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

demo_ajax_json.js

{ 
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

A simple example

unable to fetch json data from ip url

2 Answers2