JQuery AJAX Comment puis-je obtenir et analyser JSONP au lieu de JSON?

Résumé
J'ai une application qui s'exécute une recherche. Avant de permettre à présenter, il envoie un appel AJAX pour une requête pour rechercher un code postal valide, puis retourne un résultat JSON qui je peux analyser. J'ai besoin de faire la même chose de la croix-domaine maintenant et je sais que je dois utiliser l'url complète et JSONP format de la place, mais je ne suis pas sûr de savoir comment le configurer.

De l'Appel AJAX

J'ai envoyer un zip code qui est exécuté par le biais d'une requête.

if (zipLength == 5) {
    $.ajax({
        type:"GET", 
        //location of the cfc
        url: "cfc/test.cfc",
        //function name and url variables to send
        data: {method:'zip_lookup', zip:zip},
        //function run on success takes the returned json object and reads values.
        success: function(obj) {
            var response = $.parseJSON(obj);

            if (response.formError == true) {
                alert(response.message);
            }
        }
    });
}

Les CFC dans Coldfusion Qui Exécute La Requête

<!---Makes sure entered zip exists--->   
<cffunction name="zip_lookup" access="remote">
    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>

    <cfoutput>
        <cfset obj = 
            {
                "formError" = formError,
                "message" = message
            } 
        />
    </cfoutput>

    <cfprocessingdirective suppresswhitespace="Yes"> 
        <cfoutput>
            #serializeJSON(obj)#
        </cfoutput>
    </cfprocessingdirective>

    <cfsetting enablecfoutputonly="No" showdebugoutput="No">
</cffunction>

La Réponse JSON

C'est ce que la requête retourne.

{"message":"Invalid Zip","formError":true}

Traiter Avec La Réponse

Comme je l'ai ci-dessus dans l'AJAX succès fonction, je peux récupérer la formError ou à message variables de la réponse JSON. Comment je peut faire cela avec JSONP?

success: function(obj) {
    var response = $.parseJSON(obj);

    if (response.formError == true) {
        alert(response.message);
    }
}

OriginalL'auteur madvora | 2015-01-14

J'ai la réponse.

Veuillez noter que l'original posté code fonctionne parfaitement bien avec une normal de la réponse JSON.

C'est la façon dont je me suis le JSONP de travail sur la réponse.

De l'Appel AJAX

$.ajax({
    type:"GET", 
    //Location of the cfc
    url: "http://yourFullUrl/test.cfc",
    //Function name and url variables to send
    data: {method:'zip_lookup', zip:zip},
    //Set to JSONP here
    dataType:"jsonp",
    //The name of the function that's sent back
    //Optional because JQuery will create random name if you leave this out
    jsonpCallback:"callback",                   
    //This defaults to true if you are truly working cross-domain
    //But you can change this for force JSONP if testing on same server
    crossDomain:true,               
    //Function run on success takes the returned jsonp object and reads values.
    success: function(responseData) {
        //Pulls the variables out of the response
        alert(responseData.formError);
        alert(responseData.message);
    }
});

Les CFC dans Coldfusion Qui Exécute La Requête

<cffunction name="zip_lookup" access="remote" returntype="string" returnformat="plain" output="false">

    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>


    <cfoutput>
        <cfscript>
           <!---Important to have double quotes around the name and value. --->
           <!---I missed this before --->
           return '#arguments.callback#({"formError": "#formError#", "message": "#message#"});';
       </cfscript>
    </cfoutput>

</cffunction>

La mise en forme des JSONP Réponse

//Using the name from the jsonpCallback setting in the AJAX call
callback({"formError": "true", "message": "Invalid Zip"});

Merci de ne pas créer manuellement json, créer un objet à la place et à l'utilisation serializeJSON. Cela permettra d'éviter d'éventuels format JSON erreurs en raison du contenu des chaînes vous de les placer dans le json.
En outre, quelques conseils a) La fonction ne devrait pas accéder à la url portée directement. Au lieu de cela, définir explicitement "zip" et "rappel" comme cfarguments. b) utilisez Toujours cfqueryparam pour protéger contre les injections sql, c) Ne pas oublier de portée locale tous de votre fonction de variables locales et d) Pas besoin de cfoutput à la fin. Juste "retour" de la chaîne. Puisque vous êtes cfml partout ailleurs, peut aussi bien utiliser cfreturn au lieu de passer à cfscript.
Kevin - vous ne savez Pas si je peux je le fais. Car ce n'est pas du JSON, mais plus JSONP et plus d'une chaîne, je ne suis pas sûr serializeJSON serait de travailler.
Les fonctions doivent être autonomes. Accéder à l'URL de la portée directement rend la fonction de moins en moins flexibles. Par exemple, si vous basculez l'appel ajax à utiliser method=POST, la fonction pause. Quelles que soient les valeurs de la fonction requiert doit être explicitement définis comme cfarguments. Ensuite, il faudra encore travailler, indépendamment de l'endroit où les valeurs d'entrée sont stockés.
Je pense que Kevin a utiliser serializeJSON de construire la chaîne JSON à l'intérieur le rappel wrapper, plutôt que de le faire manuellement.

OriginalL'auteur madvora

Pour jsonp vous suffit de définir le type de données que dans l'exemple ci-dessous

Lire : Travailler avec JSONP

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",

    //The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    //Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    //Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },

    //Work with the response
    success: function( response ) {
        console.log( response ); //server response
    }
});

OriginalL'auteur Pranay Rana

Vous devez vous connecter pour publier un commentaire.