First jquery/ajax test not working - php

Question

I'm trying to utilize jQuery/Ajax more in my web projects, as a test I have done:
HTML Code
<div id="main_content"></div>
<div class="panel panel-primary">
<div class="panel-heading">API Credits Left.</div>
<div class="panel-body">
<form id="frmAjax" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" class="form-horizontal container-fluid" role="form">
<div class="row form-group">
<div class="col-sm-12 text-right">
<button type="submit" name="submit" class="btn btn-default">Check the API credits...</button>
</div>
</div>
</form>
</div>
<div class="panel-footer"><b>DomDetailer</b> & <b>SeoKicks</b> Api credits left.</div>
</div>
Script
$(function() {
$(document).ready(function(){
$('#frmAjax').submit(function() {
$("#main_content").load('ajax-credits.php');
});
});
});
The ajax-credits.php contents:
<?php
echo "Loading...";
// http://site1.com/api/checkBalance.php?apikey=QRUE8VTQMD5Fj6&app=
$json1 = file_get_contents('http://site1.net/api/checkBalance.php?apikey=QRUE8VTQMD5F6&app=');
$data1 = json_decode($json1, true);
$valu1 = $data1[1];
// seokicks
$json2 = file_get_contents('http://www.site2.net/V1/inlinkData?appid=p2hFacSWU0&output=json&details=api_credits');
$data2 = json_decode($json2);
$valu2 = $data2->Overview->credits->available;
// display
stdmsg("Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left.");
?>
Very basic code (or so I thought) can anyone see what I have done wrong? Nothing is being displayed in the div , is there any issue?

Answer 1

Try removing echo "Loading"; and replacing
stdmsg("Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left.");
by
echo "<p>Site 1 has <b>".$valu1."</b> credits left and Site 2 has <b>".$valu2."</b> credits left.</p>";
(Whatever you echo in the PHP script called by a jQuery AJAX function is what gets sent back to the AJAX function, so that is what will get loaded into your HTML div.)