Načítanie JSON dát cez GET pomocou Javascript/JQuery

Čo sa snažím urobiť je načítať JSON údaje z online webovej služby, ktorá vyhľadáva a nájde určitý reťazec v databáze MySQL a zobraziť ich pomocou Javascriptu na HTML stránke.

S čím zápasím, je skutočne zobrazenie výsledných údajov.

Príslušné oblasti mojej HTML stránky vyzerajú takto:

<form onSubmit="results()">
    <fieldset>
        <label for="area">First digits of postal code:</label>
        <input name="area" type="text" maxlength="4" placeholder="AB12" required />
        <input type="submit" value="Search" name="search" />
    </fieldset>
</form>



<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

function results(){
    $.ajax({
        url: 'http://www.foobar.com/cp/index.php?area=AB12',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<h1>'+item.location+'</h1>'
                + '<p>'+item.id+'</br>';

                output.append(place);
            });
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
};
</script>

<div id="place">
<h3>Places near your location</h3>
</div>

Stránka pre GET dáta je http://www.foobar.com/cp/index.php s vyhľadávacou premennou 'area'. Testovací vzor je ?area=AB12.

Odpoveď č. 1

Zdá sa, že táto služba správne nezakrýva JSON objekt do zátvoriek, takže nefunguje ako JSONP.

Pozri: http://www.entertainmentcocktail.com/cp/index.php?area=AB12&jsoncallback=TEST

Vracia:

TEST[{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]

zatiaľ čo by to malo vrátiť:

TEST([{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]);

Nebudete ho môcť použiť, pretože nie je platný JSONP.

AKTUALIZÁCIA :

Odpoveď na viac informácií z komentára - ak ovládate skript na strane servera, skúste zmeniť:

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . json_encode($records);

do :

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

a uvidíme, či to funguje.

AKTUALIZÁCIA 2:

Odpovedám na iný komentár. Skutočne inicializujete premennú output? Napríklad niečím takýmto na začiatku:

var output = $('#place').append('<div/>');

Skutočne voláte svoju funkciu results? Musí sa zavolať s:

results();

alebo zaregistrované niekde ako obslužná rutina udalostí, pomocou jQuery spôsobu:

$('form').submit(results);

ale potom pridajte:

return false;

na koniec funkcie results, aby sa zabránilo znovunačítaniu stránky.

Pozrite si túto ukážku: http://jsbin.com/uziyek/1/edit - zdá sa, že funguje.

Ďalší problém:

Zdá sa, že vo vašom kóde je ďalší problém, a to, že parameter area=AB12 je pevne zakódovaný vo vašej URL. Namiesto toho by ste mali získať hodnotu z formulára a odoslať ju.

Odpoveď č. 2

JSONP ste implementovali nesprávne. Musíte vygenerovať volanie funkcie, t.j. odpoveď by mala byť foo(<json tu>);, nie foo<json tu>.

Je to banálne opraviť:

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

Ďalším problémom je, že nebránite odoslaniu formulára, t. j. keď odošlete formulár, stránka sa obnoví. Musíte tomu zabrániť. Lepšie je viazať obsluhu udalosti pomocou jQuery a nepoužívať inline obsluhu udalostí:

<form id="myForm">

a

$(function() {
    $('#myForm').submit(function(event) {
        event.preventDefault(); // <-- prevent form submission
        // Ajax call here
    });
});

DEMO