从 html 表单发布到 api json jquery

Question

我必须将数据从 html 表单发布到 api。我有以下代码：

<form name="newAppform">
<input type="text" name="appname" placeholder="App Name" id="appname"><br>
<input type="radio" name="platform" value="iOS"> iOS 
<input type="radio" name="platform" value="Android"> Android<br>
<input type="submit" value="submit" name="submit" id="submit"></form>

jQuery 是：

var a = 1; //var x = $('#appname').val(); 
$('#submit').click(function(){
//alert($('#appname').val());       
$.ajax({
    type: 'POST',
    url: 'https://service.../.../createApp',
    contentType: "application/json",
    data: JSON.stringify({"account_id" : a, "app_name" : $('#appname').val(), "app_platform" : $("[name='platform']").val()}),
    success: function() {
        alert("Complete!");
    },
    error: function(e) {
        console.log(e);
        alert("Something went wrong.");
        }
    }); 
});

我正在使用一个有效的发布网址，我在这里用省略号替换了它。我收到警报'Something went wrong.'。在控制台上记录的错误是

{readyState: 0, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, ...}。

怎么了？请注意，相同的帖子使用相同的代码，如果我没有从表单输入中获取成功消息，我会收到成功消息。相反，表单输入阅读与发布分开工作。如果我取消注释“警报”，它将能够显示我在输入文本字段中输入的值。另请注意，如果我取消注释并将变量 x 用作键“appname”的值，它仍然无法正常工作。同样的错误。但是，如果我在外部将 x 硬编码为 var x = 'abc'，我就会成功。

Answer 1

只是一点提示：不要手动获取所有输入字段（这会变得非常讨厌）。您可以使用serializeArray 函数。

function serializeForm(_formId){
    var oJson = {};
    var oFrm = $(_formId).serializeArray();
    for (var i = 0; i < oFrm.length; i++) {
        var entry = oFrm[i];
        oJson[entry.name] = entry.value;
    }

    return oJson;
}

这将毫不费力地为您生成正确的 JSON（以防您要使用表单发布更多数据）。

并使用您可以使用的给定 URL 对 API 进行 POST：

var oJson = serializeForm(#idOfForm);
$.ajax({
        type: "POST",
        url: 'YOUR_URL',
        data: oJson,
        success: function (data) {
          // success
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Display error message
            console.error(errorThrown);
        },
        dataType: "json"
    });

请记住，始终将您的错误函数设置为比您所做的更有帮助。上面的代码将errorThrown parameter 记录到error console

编辑：

我检查了您的网址并发送了一些测试请求。如果 AJAX 调用告诉我们出了点问题，服务器会发送 HTTP 500 Internal Server Error，告诉我们我们正在发送一些错误的数据。我取了你一开始提供的网址，并填写了一些虚拟数据。

我得出的结论是，您发送了一些错误的东西：

• 您的原始代码是正确的。只需删除 contentType 属性，因此服务器希望您发送 contentType application/x-www-form-urlencoded; charset=UTF-8 这是 jQuery ajax 标准

• 我的方法也有效（如上面的代码中提供的那样——但这不是重点）——它只是缺少正确的输入名称，尝试将 HTML 替换为以下内容：

  <form id="test" name="newAppform"> <input type="text" name="account_id" placeholder="Account Id" id="accId"><br> <input type="text" name="app_name" placeholder="App Name" id="appname"><br> <input type="radio" name="app_platform" value="iOS"> iOS <input type="radio" name="app_platform" value="Android"> Android<br> <input type="submit" value="submit" name="submit" id="submit"> </form>

有什么不同？

platform 重命名为 app_platform 我还引入了 account_id 输入，仅用于测试目的（如果发送请求，请确保提供正确的 account_id，否则您还会收到内部服务器错误。

appname 重命名为 app_name