Comment obtenir des données de requête Ajax avec jQuery?

Question

J'ai une requête Ajax:

$.ajax({ url: "MyPage.aspx", 
    data: params, 
    success: function(data) { 
     // Check results     
     $('#testp').append(data.message); 
     enableForm(); 
    }, 
    error: function() { 
     alert('Unable to load the permissions for this user level.\n\nYour login may have expired.'); 
     enableForm(); 
    }, 
    dataType: "json" 
}); 

Sur la page de demande il y a du code C# qui fait cela à la fin de Page_Load:

Response.AppendHeader("X-JSON", result); 

'résultat' est formaté comme ceci:

{ "success": true, "message": "SUCCESS", "user_level": 25, "switches": [ { "number": 30, "is_enabled": false, "is_default": false }, { "number": 30, "is_enabled": false, "is_default": false } ]} 

La requête renvoie avec succès, mais 'données' est null. Qu'est-ce que je rate?

Merci.

Answer 1

Votre principal problème semble être que vous renvoyer les données JSON dans un en-tête HTTP au lieu de que le contenu de la réponse. Vous voulez sans doute faire quelque chose comme ceci:

Response.ContentType = "application/json"; 
Response.Write(result); 
Response.End(); 

Cela pourrait résoudre votre problème immédiat, mais je recommande fortement que vous évitez l'approche de l'utilisation ouput directe d'une page ASPX. Il y a beaucoup de frais généraux inutiles pour arriver au point de chargement, quand tout ce que vous voulez vraiment, c'est un simple point de terminaison JSON. Pour ne pas mentionner, la gestion manuelle de la sérialisation JSON n'est pas nécessaire.

Si vous construisez cette chaîne JSON à partir d'un objet côté serveur, vous pouvez utiliser une "méthode de page" ASP.NET AJAX pour le renvoyer directement et laisser le framework gérer la sérialisation.Comme ceci:

public class PermissionsResult 
{ 
    public bool success; 
    public string message; 
    public int user_level; 

    public List<Switch> switches; 
} 

public class Switch 
{ 
    public int number; 
    public bool is_enabled; 
    public bool is_default; 
} 

// The combination of a WebMethod attribute and public-static declaration 
// causes the framework to create a lightweight endpoint for this method that 
// exists outside of the normal Page lifecycle for the ASPX page. 
[WebMethod] 
public static PermissionsResult GetPermissions(int UserLevel) 
{ 
    PermissionsResult result = new PermissionsResult(); 

    // Your current business logic to populate this permissions data. 
    result = YourBusinessLogic.GetPermissionsByLevel(UserLevel); 

    // The framework will automatically JSON serialize this for you. 
    return result; 
} 

Vous devrez adapter cela à vos propres structures de données côté serveur, mais nous espérons que vous avez l'idée. Si vous avez déjà des classes existantes que vous pouvez remplir avec les données dont vous avez besoin, vous pouvez les utiliser au lieu d'en créer de nouvelles pour le transfert.

Pour call an ASP.NET AJAX Page Method with jQuery, vous devez spécifier un couple des paramètres supplémentaires sur l'appel .ajax $():

$.ajax({ 
    // These first two parameters are required by the framework. 
    type: 'POST', 
    contentType: 'application/json', 
    // This is less important. It tells jQuery how to interpret the 
    // response. Later versions of jQuery usually detect this anyway. 
    dataType: 'json', 
    url: 'MyPage.aspx/GetPermissions', 
    // The data parameter needs to be a JSON string. In older browsers, 
    // use json2.js to add JSON.stringify() to them. 
    data: JSON.stringify({ UserLevel: 1}), 
    // Alternatively, you could build the string by hand. It's messy and 
    // error-prone though: 
    data: "{'UserLevel':" + $('#UserLevel').val() + "}", 
    success: function(data) { 
    // The result comes back wrapped in a top-level .d object, 
    // for security reasons (see below for link). 
    $('#testp').append(data.d.message); 
    } 
}); 

En ce qui concerne le paramètre de données, voici les informations sur ce besoin d'être une chaîne: http://encosia.com/2010/05/31/asmx-scriptservice-mistake-invalid-json-primitive/

en outre, voici plus sur l'utilisation de l'approche JSON.stringify(): http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/

la question .d est celui qui peut être déroutant au premier abord. En gros, le JSON reviendra comme ça au lieu de la façon dont vous pourriez vous attendre:

{"d": { "success": true, "message": "SUCCESS", "user_level": 25, "switches": [ { "number": 30, "is_enabled": false, "is_default": false }, { "number": 30, "is_enabled": false, "is_default": false } ]}} 

Il est facile de représenter une fois que vous attendez. Cela rend votre point de terminaison plus sûr en atténuant un exploit client déloyal lorsque le conteneur de niveau supérieur est un tableau. Non applicable dans ce cas précis, mais agréable à avoir en règle générale. Vous en lire plus à ce sujet ici: http://encosia.com/2009/02/10/a-breaking-change-between-versions-of-aspnet-ajax/

Answer 2

La réponse devrait être:

nom de la méthode

d'ajouter à la fin de votre valeur url des paramètres ajax:

url: "MyPage.aspx/méthode"

Assurez-vous que vous pointez la page correcte avec la méthode et assurez-vous que la méthode a l'attribut WebMethod().

---

$ .ajax gère à peu près tout pour vous. Les données de retour, si l'appel AJAX a réussi, est passé à la fonction de succès comme argument, à savoir:

success: function (data) { 
    //do something 
} 

La valeur de « data.message » est disponible uniquement si « message » est une propriété de la données renvoyées Dans votre cas, l'élément avec l'ID "testp" doit recevoir la valeur de "data.message", mais le reste de l'objet n'est pas utilisé.

Blog Grand pour vous de vérifier pour toutes les choses AJAX pour .Net: http://encosia.com/

J'utilise souvent le JSON lib (http://www.json.org/js.html) pour tester les données renvoyées. Il suffit d'ajouter

alert(JSON.stringify(data)); 

à votre fonction de succès

Answer 3

J'ai eu un peu de chance récemment, voici le message que je l'ai fait, et il y a des liens vers beaucoup de bonnes infos là-bas!

Can't get jQuery Ajax to parse JSON webservice result