從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進行發布，您可以使用：

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