Abrufen von JSON-Daten mit Javascript/JQuery

, Was ich versuche zu tun, ist abrufen von JSON-Daten aus einer online-web-service, das sucht und findet, die eine bestimmte Zeichenfolge in einer MySQL-Datenbank und zeigt Sie über Javascript auf einer HTML-Seite.

, Was ich mit zu kämpfen ist eigentlich die Anzeige der resultierenden Daten.

Den relevanten Bereichen meine HTML-Seite sieht wie folgt aus:

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

Der Seite für das abrufen von Daten ist http://www.entertainmentcocktail.com/cp/index.php mit der Suche nach der variable 'Bereich'. Probe ist ?Bereich=AB12.

Und was genau ist es, dass Sie Probleme mit? Was ist das Ergebnis Sie erhalten und was Sie erwarten, zu bekommen?
FWIW, die API scheint nicht zur Unterstützung von JSONP-richtig. Anhängen jsoncallback=foo zurück foo[{... was offensichtlich falsch ist. Sie sollten, Benachrichtigen Sie oder haben Sie einen Blick auf Ihre API-Dokumentation zu machen, wie die richtige JSONP-Aufruf.
Gut, einmal auf "senden" gedrückt wird, wird die Seite aktualisiert in ?area=AB12&search=Search und sonst nichts ändert. Ich möchte die Seite für die Anzeige der Zeilen " Daten, aber es gibt keine sichtbaren Veränderungen an der Seite.
Ich schrieb die API mir nur um diese eine einzige, einfache Funktion, ist das ein Problem, wenn das alles ist, dass ich es verwenden?
Dann sind Sie implementiert, ist es falsch. Sie brauchen, um zu generieren, eine Funktion aufrufen, d.h. die Antwort sollte foo(<json here>); nicht foo<json here>. Es sollte trivial zu beheben und alles andere sollte funktionieren.

InformationsquelleAutor Ben | 2013-01-23

  1. 4

    Scheint es, dass dieser Dienst ist nicht richtig, das einwickeln der JSON-Objekt in Klammern, so dass es nicht funktioniert, als JSONP.

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

    Gibt es:

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

    während es sollte zurück:

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

    Werden Sie nicht in der Lage, es zu benutzen, weil es ist nicht gültig JSONP.

    UPDATE:

    Beantwortung mehr Infos aus dem Kommentar - wenn Sie die Kontrolle der server-Seite Skript dann ändern versuchen:

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

    :

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

    und sehen, ob das funktioniert.

    UPDATE 2:

    Beantwortung weiterer Kommentar. Tun Sie wirklich initialisieren der output variable? Zum Beispiel so etwas wie das hier am Anfang:

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

    Tun, die Sie eigentlich nennen Ihre results Funktion? Es muss aufgerufen werden mit:

    results();

    oder irgendwo registriert, wie ein Ereignis-handler, mit der jQuery-Weg:

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

    aber dann hinzufügen:

    return false;

    dem Ende der results Funktion zu verhindern, dass die Seite neu geladen wird.

    Sehen Sie sich diese demo: http://jsbin.com/uziyek/1/edit - es scheint zu funktionieren.

    Ein weiteres problem:

    Scheint es ein anderes problem mit Ihrem code, dass die Fläche=AB12 parameter ist fest kodiert in der URL. Was Sie tun sollten stattdessen ist, um den Wert aus dem Formular und senden.

    Wie kann das getan werden? Der code auf dem web-Dienst: while($row = mysql_fetch_assoc($result)) { $records[] = $row; } echo $_GET['jsoncallback'] . json_encode($records); - gibt es hier etwas, das geändert werden kann?
    Okay, das ist komplett, aber es gibt überhaupt keine Veränderung - es wird nichts angezeigt auf meiner HTML-Seite, noch.
    Bitte siehe meine aktualisierte Antwort.
    Unglaublich, vielen Dank für deine Hilfe.

    InformationsquelleAutor rsp

  2. 2

    Sie umgesetzt JSONP falsch. Sie brauchen, um zu generieren, eine Funktion aufrufen, d.h. die Antwort sollte foo(<json here>); nicht foo<json here>.

    Es ist trivial zu beheben:

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

    Ein weiteres problem ist, dass Sie nicht die Verhinderung der übermittlung der form, d.h. wenn Sie das Formular Absenden, wird die Seite aktualisiert. Sie haben, um das zu verhindern. Besser binden den event-handler mit jQuery und verwenden Sie keine inline-event-Handler:

    <form id="myForm">

    und

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

    DEMO

    Ja, das ist, was ich getan habe -, Zeichen-für-Zeichen (siehe hier). Allerdings ist mein client-code ist immer noch nicht präsentiert alles, was auch immer.
    Aktualisieren meine Antwort.
    Vielen Dank für deine Hilfe. Ich bin versucht zu bekommen, um zu arbeiten, aber gibt es einen syntax Fehler in der Zeile, die sagt $('#search').submit(event){?
    Fest und fügte hinzu, eine DEMO: jsfiddle.net/fkling/AKEPX. Wenn Sie nicht sehr vertraut mit jQuery, das ich wirklich empfehlen, Lesen Sie die Anleitung zuerst: docs.jquery.com/Tutorials:Getting_Started_with_jQuery.
    Nochmals vielen Dank für Ihre Geduld. Ich habe aktualisiert, der code und klebte es hier, aber es gibt noch kein update um die Seite zu löschen.

    InformationsquelleAutor Felix Kling

Schreibe einen Kommentar