将表单提交到期望 json 数据作为帖子正文的外部站点答案

【问题标题】：Submit a form to external site that expects json data as post body将表单提交到期望 json 数据作为帖子正文的外部站点
【发布时间】：2014-01-17 22:19:45
【问题描述】：

我需要模拟在外部站点上提交表单，我已经让它在其他站点上工作，但现在外部站点需要 json 格式的值作为参数，这很难实现。

在服务器需要 json 之前，我已经让它完美地处理了这个（注意 javascript 模拟提交表单，并且表单被编码为与外部站点相关）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"> 
     function load()
     {
         window.document.login_form.submit();
         return;
     }
    </script>

</head>
<body onload="load()">
<form name="login_form" method="post" action="http://external.webserver.com/web/session/authenticate">
    <input type="hidden" name="name" value="andres" />
    <input type="hidden" name="phone" value="593123123" />

</form>

在这里，我附上了一张图片，表明如果我将正文作为 json 数据发布，它将起作用。

作为解决方案，我尝试了其他想法，例如此处建议的 POST data in JSON format

     function load()
     {
         var frm = $(document.login_form);
         dat = JSON.stringify(frm.serializeArray());
         alert("I am about to POST this:\n\n" + dat);

         $.post(
                 frm.attr("action"),
                 dat,
                 function(data) {
                     alert("Response: " + data);
                     }
                 );

     //window.document.login_form.submit();
     return;
 }

但是这种方法给我带来了一些与“访问控制允许来源”相关的其他问题，我不会解决这些问题，因为我不拥有我想要发布的服务器。

那么有人会提供一种更好的方法来将 json 帖子（或正文）发布到外部服务器吗？

【问题讨论】：

您确定服务器需要 JSON 表单数据吗？浏览器从不发送该格式的表单输入。浏览器通常支持的唯一格式是 x-www-form-urlencoded（与 URL 查询字符串相同的格式）或 multipart/form-data（类似于多部分电子邮件正文）。

标签： javascript json forms

【解决方案1】：

您不能使用表单提交application/json
您无法使用 JavaScript 读取来自不同来源的响应（除非该来源授予权限）

剩下的唯一选择是让您的表单或 JavaScript 将数据发送到其他地方（您可以控制），并让服务器负责处理其他地方发出自己的 HTTP 请求您要联系的服务器，然后将响应转发回浏览器。

【讨论】：

【解决方案2】：

此答案于 2014 年发布；从那以后发生了很多变化，现在这个答案或多或少无关紧要。

如果服务器期待一个 JSON 有效负载，并且如果它来自 hurl.it，那么您可能没有遇到 CORS 问题。

$.post 本身无法设置 content-type 标头；您需要使用父 $.ajax 并确保您发布了正确的 JSON 有效负载（尝试将 dat 记录到控制台并根据 jsonlint 检查它）。

您的示例还存在一些语法错误，例如 document.login_form 周围缺少引号以及 $.post 格式不正确。

尝试清理它：

var frm = $('document.login_form');
data = JSON.stringify(frm.serializeArray());

$.ajax(frm.attr("action"), {
    type: "POST",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json"
}, function (data) {
    console.log(data);
});

【讨论】：

$.post 中的 dataType 参数指定服务器返回的数据类型，而不是它期望的数据类型。
@Barmar 对，抱歉，我从不使用 $.post，只使用 $.ajax。
和$.ajax一样。
是的，但我相信你不能用 $.post 设置contentType？或者你可以吗？我总是像那里的更新示例一样设置它，显然两者都到位，它发送和请求 JSON。
没错，$.post 中不能指定大部分 AJAX 参数，除非在它之前调用 $.ajaxSetup。