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：ƒ，...}。

有什么问题？请注意，相同的帖子使用相同的代码，如果我没有从表单输入中获取成功消息，我将收到成功消息。相反，表单输入读取除了发布之外单独工作。如果我取消注释'alert'，它就能显示我在输入文本字段中输入的值。另请注意，如果我取消注释并使用变量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而不需要太多努力（如果您要使用表单POST更多数据）。

使用给定的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内部服务器错误，它告诉我们，我们发送了一些错误的数据。我拿了你在开头提供的URL并填写了一些虚拟数据。

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

您的原始代码是正确的。只需删除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

从html表单发布到api json jquery

1 个答案: