How to use type POST in jsonp ajax call

Question

I am using JQuery ajax jsonp  I have got below JQuery Code      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                               The above code is working fine  I just want to send the request as  POST  instead of  GET   Please suggest how can I achieve this   Thanks

User · Accepted Answer

You can t POST using JSONP   it simply doesn t work that way  it creates a  lt script gt  element to fetch data   which has to be a GET request   There s not much you can do besides posting to your own domain as a proxy which posts to the other   but user s not going to be able to do this directly and see a response though

User · Answer

If you just want to do a form POST to your own site using   ajax    for example  to emulate an AJAX experience   then you can use the jQuery Form Plugin  However  if you need to do a form POST to a different domain  or to your own domain but using a different protocol  a non-secure http  page posting to a secure https  page   then you ll come upon cross-domain scripting restrictions that you won t be able to resolve with jQuery alone  more info   In such cases  you ll need to bring out the big guns  YQL  Put plainly  YQL is a web scraping language with a SQL-like syntax that allows you to query the entire internet as one large table  As it stands now  in my humble opinion YQL is the only  easy  way to go if you want to do cross-domain form POSTing using client-side JavaScript   More specifically  you ll need to use YQL s Open Data Table containing an Execute block to make this happen  For a good summary on how to do this  you can read the article  Scraping HTML documents that require POST data with YQL   Luckily for us  YQL guru Christian Heilmann has already created an Open Data Table that handles POST data  You can play around with Christian s  htmlpost  table on the YQL Console  Here s a breakdown of the YQL syntax    select   - select all columns  similar to SQL  but in this case the columns are XML elements or JSON objects returned by the query  In the context of scraping web pages  these  columns  generally correspond to HTML elements  so if want to retrieve only the page title  then you would use select head title  from htmlpost - what table to query  in this case  use the  htmlpost  Open Data Table  you can use your own custom table if this one doesn t suit your needs   url       - the form s action URI  postdata       - the serialized form data  xpath       - the XPath of the nodes you want to include in the response  This acts as the filtering mechanism  so if you want to include only  lt p gt  tags then you would use xpath    p   to include everything you would use xpath          Click  Test  to execute the YQL query  Once you are happy with the results  be sure to  1  click  JSON  to set the response format to JSON  and  2  uncheck  Diagnostics  to minimize the size of the JSON payload by removing extraneous diagnostics information  The most important bit is the URL at the bottom of the page -- this is the URL you would use in a   ajax   statement   Here  I m going to show you the exact steps to do a cross-domain form POST via a YQL query using this sample form    lt form id  form-post  action  https   www example com add member  method  post  gt     lt input type  text  name  firstname  gt     lt input type  text  name  lastname  gt     lt button type  button  onclick  doSubmit    gt Add Member lt  button gt   lt  form gt    Your JavaScript would look like this   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 amp format json amp env store 3A 2F 2Fdatatables org 2Falltableswithkeys amp callback        dataType   json      Optional - jQuery autodetects this by default        success  function response          console log response                   The url string is the query URL copied from the YQL Console  except with the form s encoded action URI and serialized input data dynamically inserted   NOTE  Please be aware of security implications when passing sensitive information over the internet  Ensure the page you are submitting sensitive information from is secure  https   and using TLS 1 x instead of SSL 3 0

User · Answer

Use json in dataType and send like this         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                       and put this lines in your server side file   if PHP   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Methods  POST    header  Access-Control-Max-Age  1000      if java   response addHeader   Access-Control-Allow-Origin           response addHeader   Access-Control-Allow-Methods    POST      response addHeader   Access-Control-Max-Age    1000

User · Answer

Here is the JSONP I wrote to share with everyone   the page to send req http   c64 tw r20 eqDiv fr64 html  please save the srec below to  html youself  c64 tw r20 eqDiv src fr64 txt the page to resp  please save the srec below to  jsp youself  c64 tw r20 eqDiv src doFr64 txt  or embedded the code in your page    function callbackForJsonp resp     var elemDivResp       idForDivResp    elemDivResp empty     try        elemDivResp html     idForF1   val                 idForF2   val       lt br  gt         elemDivResp append         resp ans     lt br  gt         elemDivResp append         resp ans2     lt br  gt        catch  e         alert  callbackForJsonp     e             document  ready function      var testUrl    http   c64 tw r20 eqDiv doFr64 jsp callback        document body  prepend  post to     testUrl     lt br  gt  lt br  gt          idForBtnToGo   click function            ajax            url   testUrl          type    POST            data                 f1       idForF1   val                f2       idForF2   val                op    add                      dataType    jsonp           crossDomain   true            jsonpCallback    callbackForJsonp           success   callbackForJsonp             success   function resp               console log  Yes  you success              callbackForJsonp resp                          error   function XMLHttpRequest  status  err                 console log XMLHttpRequest status     n    err                 alert XMLHttpRequest status     n    err

User · Answer

Modern browsers allow cross-domain AJAX queries  it s called Cross-Origin Resource Sharing  see also this document for a shorter and more practical introduction   and recent versions of jQuery support it out of the box  you need a relatively recent browser version though  FF3 5   IE8   Safari 4   Chrome4   no Opera support AFAIK

User · Answer

JsonP only works with type  GET   More info  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

[jquery] How to use type: "POST" in jsonp ajax call

Examples related to jquery

Examples related to jsonp

Examples related to http-post