Comment utiliser getJSON, envoyer des données avec la méthode post?


108

J'utilise la méthode ci-dessus et cela fonctionne bien avec un paramètre dans l'URL.

par exemple Students/getstud/1où le format contrôleur / action / paramètre est appliqué.

Maintenant, j'ai une action dans le contrôleur des étudiants qui accepte deux paramètres et renvoie un objet JSON.

Alors, comment publier des données avec la $.getJSON()méthode de publication?

Des méthodes similaires sont également acceptables.

Le but est d'appeler une action du contrôleur avec AJAX.


4
getdans les getJSONmoyens utiliser GET pour obtenir du json.
Majid Fouladpour

1
@Majid Fouladpour Quand j'ai posé cette question, je ne le savais pas ..!
Vikas

Réponses:


217

La méthode $ .getJSON () effectue un HTTP GET et non un POST. Vous devez utiliser $ .post ()

$.post(url, dataToBeSent, function(data, textStatus) {
  //data contains the JSON object
  //textStatus contains the status: success, error, etc
}, "json");

Dans cet appel, il dataToBeSentpeut s'agir de tout ce que vous voulez, bien que si vous envoyez le contenu d'un formulaire html, vous pouvez utiliser la méthode sérialiser pour créer les données pour le POST à ​​partir de votre formulaire.

var dataToBeSent = $("form").serialize();

7
Je veux juste ajouter que $ .getJSON prend en charge Jsonp (accès interdomaine) malheureusement $ .post non.
Tomas

2
En fait .getJSON () prend en charge l'accès interdomaine de deux manières. JSONP, qui n'utilise pas GET ou POST mais l'injection de script; mais aussi CORS - et .post () prend également en charge CORS. Cependant CORS exige que le serveur le prenne également en charge, contrairement à JSONP.
hippietrail

2
Ce n'est pas vrai, JSONP nécessite également la prise en charge du serveur pour analyser le paramètre de rappel.
Shrulik

Lorsque j'utilise la fonction ci-dessus, je reçois un objet string au lieu d'un objet json.
Pratik Singhal

13

Voici ma solution «en une ligne»:

$.postJSON = function(url, data, func) { $.post(url+(url.indexOf("?") == -1 ? "?" : "&")+"callback=?", data, func, "json"); }

Afin d'utiliser jsonp et la méthode POST, cette fonction ajoute le paramètre GET "callback" à l'URL. Voici comment l'utiliser:

$.postJSON("http://example.com/json.php",{ id : 287 }, function (data) {
   console.log(data.name);
});

Le serveur doit être prêt à gérer le paramètre de rappel GET et à renvoyer la chaîne json sous la forme:

jsonp000000 ({"name":"John", "age": 25});

dans lequel "jsonp000000" est la valeur GET de rappel.

En PHP, l'implémentation serait comme:

print_r($_GET['callback']."(".json_encode($myarr).");");

J'ai fait des tests inter-domaines et cela semble fonctionner. Encore besoin de tests supplémentaires.


1
Cela ne contournera jamais la limite de GET tandis que la taille maximale POST peut être redéfinie.
Dementic

Pourquoi avez-vous ajouté ?callback? dans l'url? Cela a fait que le rappel ne soit pas appelé pour moi. J'ai également ajouté JSON.stringify(data). +1, article utile!
Ionică Bizău

@ IonicăBizău: merci. Afin de renvoyer un objet, nous devons ajouter le paramètre "callback" à l'URL et le serveur doit renvoyer le même nom d'objet généré par JQuery. J'utilise également une fonction de remplacement pour getJSON ():jQuery.getJSON = function(url, data, func) { return $.get(url+(url.indexOf("?") == -1 ? "?" : "&")+"callback=?", data, func, "json"); }
lepe

7

Ajoutez simplement ces lignes à votre <script>(quelque part après le chargement de jQuery mais avant de poster quoi que ce soit):

$.postJSON = function(url, data, func)
{
    $.post(url, data, func, 'json');
}

Remplacez (certains / tous) $.getJSONpar $.postJSONet profitez-en!

Vous pouvez utiliser les mêmes fonctions de rappel Javascript qu'avec $.getJSON. Aucun changement côté serveur n'est nécessaire. (Eh bien, je vous recommande de toujours utiliser $_REQUESTen PHP. Http://php.net/manual/en/reserved.variables.request.php , entre $ _REQUEST, $ _GET et $ _POST lequel est le plus rapide? )

C'est plus simple que la solution de @ lepe.


Cela ne fonctionnait pas avec les méthodes done () et fail () que vous pouvez normalement appliquer à getJSON.
HackWeight

3

J'avais du code qui faisait getJSON. Je l'ai simplement remplacé par post. À ma surprise, il a fonctionné

   $.post("@Url.Action("Command")", { id: id, xml: xml })
      .done(function (response) {
           // stuff
        })
        .fail(function (jqxhr, textStatus, error) {
           // stuff
        });



    [HttpPost]
    public JsonResult Command(int id, string xml)
    {
          // stuff
    } 

3

Je viens d'utiliser un post et un if:

data = getDataObjectByForm(form);
var jqxhr = $.post(url, data, function(){}, 'json')
    .done(function (response) {
        if (response instanceof Object)
            var json = response;
        else
            var json = $.parseJSON(response);
        // console.log(response);
        // console.log(json);
        jsonToDom(json);
        if (json.reload != undefined && json.reload)
            location.reload();
        $("body").delay(1000).css("cursor", "default");
    })
    .fail(function (jqxhr, textStatus, error) {
        var err = textStatus + ", " + error;
        console.log("Request Failed: " + err);
        alert("Fehler!");
    });

1

$.getJSON()est assez pratique pour envoyer une requête AJAX et récupérer des données JSON en tant que réponse. Hélas, la documentation jQuery n'a pas de fonction sœur qui devrait être nommée $.postJSON(). Pourquoi ne pas simplement l'utiliser $.getJSON()et en finir avec? Eh bien, peut-être voulez-vous envoyer une grande quantité de données ou, dans mon cas, IE7 ne veut tout simplement pas fonctionner correctement avec une requête GET.

C'est vrai, il n'y a actuellement aucune $.postJSON()méthode, mais vous pouvez accomplir la même chose en spécifiant un quatrième paramètre (type) dans la $.post()fonction:

Mon code ressemblait à ceci:

$.post('script.php', data, function(response) {
  // Do something with the request
}, 'json');

-8

si vous n'avez que deux paramètres, vous pouvez le faire:

$.getJSON('/url-you-are-posting-to',data,function(result){

    //do something useful with returned result//
    result.variable-in-result;
});

5
je pense que ce n'est pas la réponse à ce qui a été demandé.
Harmeet Singh
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.