Hae JSON GET -tietoja Javascriptillä/JQueryllä

Mitä yritän tehdä on hakea JSON-dataa verkkopalvelusta, joka etsii ja löytää tietyn merkkijonon MySQL-tietokannasta ja näyttää sen Javascriptin avulla HTML-sivulla.

Sen kanssa, jonka kanssa kamppailen, on itse asiassa tulosten tietojen näyttäminen.

HTML-sivuni asiaankuuluvat osat näyttävät tältä:

<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>

Sivu GET-datalle on http://www.foobar.com/cp/index.php hakumuuttujalla 'area'. Testiesimerkki on ?area=AB12.

Vastaus #1

Näyttää siltä, että tämä palvelu ei kääri JSON-oliota oikein sulkuihin, joten se ei toimi JSONP:nä.

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

Se palauttaa:

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

vaikka sen pitäisi palauttaa:

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

Et voi käyttää sitä, koska se ei ole kelvollinen JSONP.

PÄIVITYS :

Vastaus kommentista saadusta lisätiedosta - jos hallitset palvelinpuolen skriptiä, yritä muuttaa:

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

kohtaan :

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

ja katso, toimiiko se.

PÄIVITYS 2:

Vastataan toiseen kommenttiin. Alatko todella alustaa output-muuttujaa? Esimerkiksi jollain tälläisellä alussa:

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

Kutsutko itse asiassa results-funktiotasi? Se täytyy kutsua seuraavasti:

results();

tai rekisteröity jonnekin tapahtumankäsittelijänä käyttäen jQueryn tapaa:

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

mutta lisää sitten:

return false;

results-funktion loppuun estämään sivun uudelleenlatauksen.

Katso tämä demo: http://jsbin.com/uziyek/1/edit - se näyttää toimivan.

Toinen ongelma:

Näyttää olevan toinenkin ongelma koodissasi, nimittäin että area=AB12 -parametri on kovakoodattu URL-osoitteeseesi. Sen sijaan sinun pitäisi saada arvo lomakkeelta ja lähettää se sen mukaan.

Vastaus #2

Sinä toteutit JSONP:n väärin. Sinun täytyy luoda funktiokutsu, eli vastaus pitäisi olla foo(<json tässä>);, ei foo<json tässä>.

Sen korjaaminen on helppoa:

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

Toinen ongelma on se, että et estä lomakkeen lähettämistä, eli kun lähetät lomakkeen, sivu päivittyy. Sinun täytyy estää se. On parempi liittää tapahtumankäsittelijä jQueryllä eikä käyttää sisäisiä tapahtumankäsittelijöitä:

<form id="myForm">

ja

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

DEMO