如何在 jsonp ajax 调用中使用类型：“POST”

Question

我正在使用 JQuery ajax jsonp。我有以下 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();  
         } 

    });  

上面的代码工作正常，我只想将请求发送为 "POST" 而不是 "GET"，请建议我该如何实现。

谢谢

Answer 1

您不能使用 JSONP 进行 POST...这种方式根本行不通，它会创建一个 <script> 元素来获取数据...必须是一个 GET 请求。除了发布到您自己的域作为代理发布到另一个域之外，您无能为力...但是用户将无法直接执行此操作并看到响应。

Answer 2

在dataType 中使用json 并像这样发送：

    $.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);
        }
    });

并将这些行放在您的服务器端文件中：

如果是 PHP：

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

如果是java：

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

Answer 3

现代浏览器允许跨域 AJAX 查询，它被称为 Cross-Origin Resource Sharing（另请参阅 this document 以获得更简短和更实用的介绍），并且最新版本的 jQuery 开箱即用地支持它；不过，您需要一个相对较新的浏览器版本（FF3.5+、IE8+、Safari 4+、Chrome4+；不支持 Opera AFAIK）。

Answer 4

JsonP 仅适用于类型：GET，

更多信息 (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

Answer 5

如果您只想使用$.ajax() 将表单POST 到您自己的站点（例如，模拟AJAX 体验），那么您可以使用jQuery Form Plugin。但是，如果您需要向其他域或您自己的域但使用不同的协议（非安全的http: 页面发布到安全的https: 页面）进行表单 POST，那么您会遇到单独使用 jQuery 无法解决的跨域脚本限制 (more info)。在这种情况下，您需要拿出大炮：YQL。说白了，YQL 是一种 Web 抓取语言，具有类似 SQL 的语法，允许您将整个互联网作为一个大表进行查询。就目前而言，在我看来，如果您想使用客户端 JavaScript 进行跨域表单 POST，那么 YQL 是唯一 [简单] 的方法。

更具体地说，您需要使用 YQL 的 Open Data Table 包含一个 Execute 块来实现这一点。关于如何做到这一点的一个很好的总结，你可以阅读文章“Scraping HTML documents that require POST data with YQL”。幸运的是，YQL 大师 Christian Heilmann 已经创建了一个Open Data Table that handles POST data。您可以在YQL Console 上使用 Christian 的“htmlpost”表。以下是 YQL 语法的细分：

• select * - 选择所有列，类似于 SQL，但在这种情况下，列是查询返回的 XML 元素或 JSON 对象。在抓取网页的上下文中，这些“列”通常对应于 HTML 元素，因此如果只想检索页面标题，则可以使用select head.title。
• from htmlpost - 查询什么表；在这种情况下，请使用“htmlpost”开放数据表（如果此表不适合您的需要，您可以使用自己的自定义表）。
• url="..." - 表单的 action URI。
• postdata="..." - 序列化的表单数据。
• xpath="..." - 要包含在响应中的节点的 XPath。这充当过滤机制，因此如果您只想包含<p> 标签，那么您将使用xpath="//p"；包括您将使用的所有内容xpath="//*"。

单击“测试”以执行 YQL 查询。一旦您对结果感到满意，请务必 (1) 单击“JSON”将响应格式设置为 JSON，以及 (2) 取消选中“诊断”以通过删除无关的诊断信息来最小化 JSON 有效负载的大小。最重要的是页面底部的 URL —— 这是您将在 $.ajax() 语句中使用的 URL。

在这里，我将向您展示使用此示例表单通过 YQL 查询执行跨域表单 POST 的确切步骤：

<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>

您的 JavaScript 将如下所示：

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);
    }
  });
}

url 字符串是从 YQL 控制台复制的查询 URL，除了表单的编码 action URI 和动态插入的序列化输入数据。

注意：通过互联网传递敏感信息时，请注意安全隐患。确保您提交敏感信息的页面是安全的 (https:) 和 using TLS 1.x instead of SSL 3.0。

Answer 6

这是我写的JSONP分享给大家：

发送请求的页面
http://c64.tw/r20/eqDiv/fr64.html

请自行将下面的 srec 保存为 .html
c64.tw/r20/eqDiv/src/fr64.txt
要响应的页面，请自行将下面的 srec 保存到 .jsp
c64.tw/r20/eqDiv/src/doFr64.txt

或在您的页面中嵌入代码：

函数 callbackForJsonp(resp) {

var elemDivResp = $("#idForDivResp");
elemDivResp.empty();

try {

    elemDivResp.html($("#idForF1").val() + " + " + $("#idForF2").val() + "<br/>");
    elemDivResp.append(" = " + resp.ans + "<br/>");
    elemDivResp.append(" = " + resp.ans2 + "<br/>");

} catch (e) {

    alert("callbackForJsonp=" + e);

}

}

$(document).ready(function() {

var testUrl = "http://c64.tw/r20/eqDiv/doFr64.jsp?callback=?";

$(document.body).prepend("post to " + testUrl + "<br/><br/>");

$("#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);

        }

    });

});

});