web-dev-qa-db-fra.com

Comment utiliser le type: "POST" dans un appel jsonp ajax

J'utilise JQuery ajax jsonp. J'ai ci-dessous Code JQuery:

 $.ajax({  
        type:"GET",        
        url: "Login.aspx",  // Send the login info to this page
        data: str, 
        dataType: "jsonp", 
        timeout: 200000,
        jsonp:"skywardDetails",
        success: function(result)
        { 
             // Show 'Submit' Button
            $('#loginButton').show();

            // Hide Gif Spinning Rotator
            $('#ajaxloading').hide();  
         } 

    });

Le code ci-dessus fonctionne bien, je veux juste envoyer la demande en tant que "POST" au lieu de "GET", veuillez suggérer comment puis-je y parvenir.

Merci

jqueryjsonphttp-post
52
Manoj Singh

Vous ne pouvez pas POST utiliser JSONP ... cela ne fonctionne tout simplement pas de cette façon, cela crée un <script> élément pour récupérer les données ... qui a être une requête GET. Il n'y a pas grand chose que vous puissiez faire à part poster sur votre propre domaine en tant que proxy qui poste sur l'autre ... mais l'utilisateur ne pourra pas le faire directement et voir une réponse.

81
Nick Craver

Utilisez json dans dataType et envoyez comme ceci:

    $.ajax({
        url: "your url which return json",
        type: "POST",
        crossDomain: true,
        data: data,
        dataType: "json",
        success:function(result){
            alert(JSON.stringify(result));
        },
        error:function(xhr,status,error){
            alert(status);
        }
    });

et mettez ces lignes dans votre fichier côté serveur:

si PHP:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

si Java:

response.addHeader( "Access-Control-Allow-Origin", "*" ); 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); 
response.addHeader( "Access-Control-Max-Age", "1000" );
36
Pratik Butani AndroidDev

Les navigateurs modernes autorisent les requêtes inter-domaines AJAX), il est appelé partage de ressources entre origines) (voir aussi ce document pour une question plus courte et plus pratique. introduction), et les versions récentes de jQuery sont compatibles, il vous faut une version de navigateur relativement récente (FF3.5 +, IE8 +, Safari 4+, Chrome4 +; non Opera support AFAIK ).

7
Tgr

JsonP ne fonctionne qu'avec le type: GET,

Plus d'infos (PHP) http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php /

.NET: http://www.west-wind.com/weblog/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks

2
jesramgue

Si vous souhaitez simplement créer un formulaire POST sur votre propre site à l'aide de $.ajax()] _ (par exemple, pour émuler une expérience AJAX)), alors vous pouvez utiliser le jQuery Form Plugin . Toutefois, si vous devez créer un formulaire POST) dans un autre domaine ou dans votre propre domaine, mais en utilisant un protocole différent (une page non sécurisée http: sur une page sécurisée https:), vous rencontrerez des restrictions de scriptage inter-domaines que vous ne pourrez pas résoudre avec jQuery seul (- plus d'infos ). Dans de tels cas, vous devrez faire ressortir les gros canons: YQL . En clair, YQL est un langage de grattage Web avec une syntaxe semblable à celle du SQL qui vous permet d'interroger Internet dans un grand tableau. À mon humble avis, YQL est le seul moyen [facile] d'utiliser un formulaire inter-domaines. Poster à l'aide de JavaScript côté client.

Plus précisément, vous devrez utiliser le Open Data Table de YQL contenant un bloc Execute pour que cela se produise. Pour un bon résumé sur la façon de procéder, vous pouvez lire l'article " Scraper les documents HTML qui nécessitent POST données avec YQL ".) Heureusement pour nous, le gourou de YQL, Christian Heilmann a déjà créé un Open Data Table qui gère POST données . Vous pouvez jouer avec la table "htmlpost" de Christian sur le YQL Console Voici une ventilation de la syntaxe YQL:

  • select * - sélectionnez toutes les colonnes, comme SQL, mais dans ce cas, les colonnes sont des éléments XML ou des objets JSON renvoyés par la requête. Dans le contexte de la suppression de pages Web, ces "colonnes" correspondent généralement à des éléments HTML. Par conséquent, si vous souhaitez récupérer uniquement le titre de la page, utilisez select head.title.
  • from htmlpost - quelle table interroger; dans ce cas, utilisez la table de données ouverte "htmlpost" (vous pouvez utiliser votre propre table personnalisée si celle-ci ne correspond pas à vos besoins).
  • url="..." - l'URI action du formulaire.
  • postdata="..." - les données du formulaire sérialisé.
  • xpath="..." - le XPath des noeuds que vous souhaitez inclure dans la réponse. Cela agit en tant que mécanisme de filtrage, donc si vous voulez inclure uniquement les balises <p>, Vous utiliserez xpath="//p"; pour inclure tout ce que vous utiliseriez xpath="//*".

Cliquez sur 'Test' pour exécuter la requête YQL. Une fois que vous êtes satisfait des résultats, assurez-vous de (1) cliquer sur 'JSON' pour définir le format de réponse sur JSON et (2) décocher "Diagnostics" pour réduire la taille de la charge JSON en supprimant les informations de diagnostic superflues. Le bit le plus important est l'URL au bas de la page. Il s'agit de l'URL que vous utiliseriez dans une instruction $.ajax().

Ici, je vais vous montrer les étapes exactes pour créer un formulaire entre domaines POST via une requête YQL en utilisant cet exemple de formulaire:

<form id="form-post" action="https://www.example.com/add/member" method="post">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <button type="button" onclick="doSubmit()">Add Member</button>
</form>

Votre JavaScript ressemblerait à ceci:

function doSubmit() {
  $.ajax({
    url: '//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlpost%20where%0Aurl%3D%22' +
         encodeURIComponent($('#form-post').attr('action')) + '%22%20%0Aand%20postdata%3D%22' +
         encodeURIComponent($('#form-post').serialize()) +
         '%22%20and%20xpath%3D%22%2F%2F*%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=',
    dataType: 'json', /* Optional - jQuery autodetects this by default */
    success: function(response) {
      console.log(response);
    }
  });
}

La chaîne url correspond à l'URL de la requête copiée à partir de la console YQL, à l'exception de l'URI codé action du formulaire et des données d'entrée sérialisées insérées dynamiquement dans le formulaire.

REMARQUE: Veuillez tenir compte des implications pour la sécurité lorsque vous transmettez des informations sensibles sur Internet. Assurez-vous que la page à partir de laquelle vous envoyez des informations sensibles est sécurisée (https:) Et avec TLS 1.x au lieu de SSL 3. .

0
thdoan