在jQuery中使用$ .ajax（）函數調用時，沒有JSON對象被傳遞

我編寫了這段代碼，以便從HTML表中捕獲用戶輸入數據，然後使用ajax將它傳遞到後端。在下面的代碼中調用$.ajax()函數之前，我能夠看到控制檯的輸出，這意味着在第15行之前的任何代碼都可以正常工作。的屏幕截圖是代碼行15輸出：

$('form').submit(               //line 1 
      function(e) {             //line 2 
       e.preventDefault();           //line 3 
       var header = $('table thead tr th').map(function() {   //line 4 
       return $(this).text();          //line 5 
       });               //line 6 

       var tableObj = $('table tbody tr').map(function(i) {   //line 7 
       var row = {};            //line 8 
       $(this).find('td').each(function(i) {      //line 9 
        var rowName = header[i];         //line 10 
        row[rowName] = $(this).find("input").val();    //line 11 
       });               //line 12 
        return row;            //line 13 
       }).get();             //line 14 
       console.log(tableObj);          //line 15 

       $.ajax({ 
       url:"/spring-mvc-webapp/jsondata", 
       type:'POST', 
       data :JSON.stringify(tableObj), 
       dataType: "json", 
       contentType : 'application/json; charset=utf-8', 
       success:function(result){console.log(result);}, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown); 
       } 
       });//end ajax 
      } 
     );

我從ALTER盒此錯誤消息：

jqXHR: 200

textStatus: parsererror

errorThrown: SyntaxError: unexpected end of input

這裏是HTML：

<form action="/spring-mvc-webapp/jsondata" method="post"> 

     <table> 
      <thead> 
       <tr> 
        <th>Gross Weight</th> 
        <th>Tare Weight</th> 
        <th>Price Per Pound</th> 
       </tr> 
      </thead> 

      <tbody> 
       <tr> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
       </tr> 
       <tr> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
       </tr> 
      </tbody> 
     </table> 
     <input type="submit" /> 
    </form>

我沒有包含後端java代碼，因爲我已經知道$.ajax()工作不正常，如果你認爲它我我需要添加後端代碼。

任何人都可以告訴我我做錯了嗎？爲什麼沒有JSON數據通過$.ajax()發佈？

來源

2015-08-31 OPK

可以顯示15行輸出，我的意思是CONSOLE.LOG上line15 –

@MuhammadIrfan我附上了屏幕截圖，請看一看 – OPK

我試過了你的代碼而沒有在文本框中傳遞任何值，它工作正常。我猜測問題可能是動作url。它存在嗎？你能證實嗎？ –

您應該直接把你的數據作爲JSON：

$.ajax({ 
    url:"/spring-mvc-webapp/jsondata", 
    type:'POST', 
    data :tableObj, 
    dataType: "json", 
    contentType : 'application/json; charset=utf-8', 
    success:function(result){console.log(result);}, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown); 
    } 
});//end ajax

或發送包含JSON序列化的數據：

$.ajax({ 
    url:"/spring-mvc-webapp/jsondata", 
    type:'POST', 
    data : { data: JSON.stringify(tableObj) }, 
    dataType: "json", 
    contentType : 'application/json; charset=utf-8', 
    success:function(result){console.log(result);}, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown); 
    } 
});//end ajax

來源

2015-08-31 20:46:25 Diego

在jQuery中使用$ .ajax（）函數調用時，沒有JSON對象被傳遞

回答

相關問題