web-dev-qa-db-fra.com

jQuery Cross Domain Ajax

Mon code ajax est

$.ajax({
    type: 'GET',
    dataType: "jsonp",
    processData: false,
    crossDomain: true,
    jsonp: false,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

Il s'agit d'une demande ajax interdomaine.

Je reçois une réponse correcte pour la demande, tout en vérifiant avec firebug je peux voir cette réponse.

Ceci est la réponse que j'obtiens dans la réponse Firebug et en accédant à cette URL via un navigateur Web

{"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"}

Mais je reçois une erreur

SyntaxError: invalid label

{"AuthenticateUserResult":"{\"PKPersonId\":8970,\"Salutation\

Si j'ai besoin d'utiliser une autre méthode pour le faire fonctionner. Je veux implémenter cela dans l'application mobile phonegap + jquery.

De plus, je n'ai aucun accès au service Web

Si je désactive chrome sécurité web ça marche bien

jqueryajaxjsonjquery-mobilecordova
14
Miqdad Ali

On dirait que la structure JSON interne est transmise sous forme de chaîne. Vous devrez le JSON.parse () une fois de plus pour obtenir ces données en tant qu'objet.

try {
  responseData = JSON.parse(responseData);
}
catch (e) {}

Modifier: essayez ce qui suit:

$.ajax({
    type: 'GET',
    dataType: "json",
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});
7
EWit

Malheureusement, il semble que ce service Web renvoie JSON qui contient un autre JSON - l'analyse du contenu du JSON interne a réussi. La solution est moche mais fonctionne pour moi. JSON.parse(...) essaie de convertir la chaîne entière et échoue. En supposant que vous obtenez toujours la réponse commençant par {"AuthenticateUserResult": et des données intéressantes sont après cela, essayez:

$.ajax({
    type: 'GET',
    dataType: "text",
    crossDomain: true,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        var authResult = JSON.parse(
            responseData.replace(
                '{"AuthenticateUserResult":"', ''
            ).replace('}"}', '}')
        );
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

Il est très important que dataType soit text pour empêcher l'analyse automatique du JSON mal formé que vous recevez du service Web.

Fondamentalement, j'efface le JSON externe en supprimant les accolades les plus hautes et la clé AuthenticateUserResult ainsi que les guillemets de début et de fin. Le résultat est un JSON bien formé, prêt pour l'analyse.

6
ElmoVanKielmo

La réponse du serveur est au format JSON String. Si le dataType défini comme 'json' jquery tentera de l'utiliser directement. Vous devez définir dataType comme "texte", puis l'analyser manuellement.

$.ajax({
    type: 'GET',
    dataType: "text", // You need to use dataType text else it will try to parse it.
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});
4
Subir Kumar Sao

Si vous prévoyez d'utiliser JSONP, vous pouvez utiliser getJSON, ce qui est fait pour cela. jQuery a des méthodes d'assistance pour JSONP.

$.getJSON( 'http://someotherdomain.com/service.svc&callback=?', function( result ) {
       console.log(result);
});

Lisez les liens ci-dessous

http://api.jquery.com/jQuery.getJSON/

Exemple de base d'utilisation de .ajax () avec JSONP?

Procédure de base pour jsonp inter-domaines

3
Techie

Lorsque vous utilisez "jsonp", vous renvoyez essentiellement des données enveloppées dans un appel de fonction, quelque chose comme

jsonpCallback([{"id":1,"value":"testing"},{"id":2,"value":"test again"}])
where the function/callback name is 'jsonpCallback'.

Si vous avez accès au serveur, veuillez d'abord vérifier que la réponse est dans le bon "jsonp" format

Pour une telle réponse provenant du serveur, vous devez également spécifier quelque chose dans l'appel ajax, quelque chose comme

jsonpCallback: "jsonpCallback",  in your ajax call

Veuillez noter que le nom du rappel n'a pas besoin d'être "jsonpCallback" c'est juste un nom choisi comme exemple mais il doit correspondre au nom (habillage) fait côté serveur.

Ma première supposition à votre problème est que la réponse du serveur n'est pas ce qu'elle devrait être.

0
PJR

Voici les extraits de mon code .. Si cela résout vos problèmes ..

Code client:

Définissez jsonpCallBack: 'photos' et dataType: 'jsonp'

 $('document').ready(function() {
            var pm_url = 'http://localhost:8080/diztal/rest/login/test_cor?sessionKey=4324234';
            $.ajax({
                crossDomain: true,
                url: pm_url,
                type: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'photos'
            });
        });
        function photos (data) {
            alert(data);
            $("#Twitter_followers").html(data.responseCode);
        };

Code côté serveur (en utilisant Rest Easy)

@Path("/test_cor")
@GET
@Produces(MediaType.TEXT_PLAIN)
public String testCOR(@QueryParam("sessionKey") String sessionKey, @Context HttpServletRequest httpRequest) {
    ResponseJSON<LoginResponse> resp = new ResponseJSON<LoginResponse>();
    resp.setResponseCode(sessionKey);
    resp.setResponseText("Wrong Passcode");
    resp.setResponseTypeClass("Login");
    Gson gson = new Gson();
    return "photos("+gson.toJson(resp)+")"; // CHECK_THIS_LINE
}
0
Sanjay Kumar

Il vous suffit d'analyser la chaîne en utilisant JSON.parse comme ceci:

var json_result = {"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"};

var parsed = JSON.parse(json_result.AuthenticateUserResult);
console.log(parsed);

Ici, vous aurez quelque chose comme ça:

Designation
null

FirstName
"Miqdad"

LastName
"Kumar"

PKPersonId
1234

PhotoPath
"/UploadFiles/"

Profile
""

Salutation
null

Et pour la demande, n'oubliez pas de définir dataType:'jsonp' et pour ajouter un fichier dans le répertoire racine de votre site appelé crossdomain.xml et contenant:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.Adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<!-- Read this: www.Adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

<!-- Most restrictive policy: -->
<site-control permitted-cross-domain-policies="none"/>

<!-- Least restrictive policy: -->
<!--
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
-->
</cross-domain-policy>

EDIT pour prendre soin de Sanjay Kumar POST

Vous pouvez donc définir la fonction de rappel à appeler dans le JSONP en utilisant jsonpCallback!

$.Ajax({
    jsonpCallback : 'your_function_name',
    //OR with anonymous function
    jsonpCallback : function(data) {
        //do stuff
    },
    ...
});
0
JoDev