從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，而不需要太多的努力（如果您要使用表單發佈更多數據）。

以及張貼對API與給定的URL，你可以使用：

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屬性因此服務器希望您發送contentTypeapplication/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得到了重新命名爲