net::ERR_CONNECTION_REFUSED when trying to call GET request from JS to Slim PHP

Question

I am trying to integrate PHP Slim to my HTML project. For this I have a code in slim v1/index.php as

$app->get('/albums', function() {
global $user_id;
$response = array();
$db = new DbHandler();
// fetching all user tasks
$result = $db->getAllAlbums();
$response["error"] = false;
$response["tasks"] = array();

// looping through result and preparing tasks array
while ($task = $result->fetch_assoc()) {
$tmp = array();
$tmp["id"] = $task["id"];
$tmp["album_year"] = $task["album_year"];
$tmp["album_img"] = $task["album_img"];
$tmp["music_director"] = $task["music_director"];
$tmp["album_desc"] = $task["album_desc"];
array_push($response["tasks"], $tmp);
}
echoRespnse(200, $response);
 });

function echoRespnse($status_code, $response) {
$app = \Slim\Slim::getInstance();
// Http response code
$app->status($status_code);

// setting response content type to json
$app->contentType('application/json');

echo json_encode($response);
}

And in my HTML I have

<script src="js/jquery.min.js"></script>
<script src="js/ajaxGetPost.js"></script>
<script>


$(document).ready(function()
{
var base_url="http://localhost/v1/";
var url,encodedata;
$("#update").focus();

/* Load Updates */
url=base_url+'albums';
encodedata='';
ajax_data('GET',url, function(data)
{
$.each(data.updates, function(i,data)
{

    alert("I am an alert box!");
var html="<div class='span5'><img class='four-radius' src='"+data.album_img+"'></div>";

$(html).appendTo("#mainContent");
});

});
});
</script>

ajaxGetPost.js has

function ajax_data(type,url, success)
{
$.ajax({
type:type,
url:url,
dataType:"json",
contentType: 'application/json',
restful:true,
cache:false,
timeout:20000,
async:true,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert(data);
}
});
}

when I run I get the following error in my console

GET http://localhost/adhandapani/v1/albums net::ERR_CONNECTION_REFUSEDx.ajaxTransport.send @ jquery.min.js:2992x.extend.ajax @ jquery.min.js:2827ajax_data @ ajaxGetPost.js:46(anonymous function) @ index.php:42x.Callbacks.c @ jquery.min.js:1075x.Callbacks.p.fireWith @ jquery.min.js:1119x.extend.ready @ jquery.min.js:130q @ jquery.min.js:39

I am not sure what is wrong it. I tried to debug the script. So added the alert data in the error. I get [object Object] in the alert.

I get the following respose when calling the API

{
error: false
tasks: [4]
0:  {
id: 8
album_year: "1976"
album_img: "00album6.jpg"
music_director: ""
album_desc: "Annakili"
}-
1:  {
id: 9
album_year: "1989"
album_img: "00ilayaraaja.png"
music_director: ""
album_desc: "karakattakaran"
}-
2:  {
id: 10
album_year: "1993"
album_img: "00album1.jpg"
music_director: ""
album_desc: "Koyil Kaalai"
}-
3:  {
id: 11
album_year: "1922"
album_img: "0logo123.png"
music_director: ""
album_desc: "sdklj"
}-
-
}

Answer 1

在我的本地主机上，我实际上在端口8888上运行，但未指定端口。