使用JQuery在表中動態添加行時未添加未定義

Question

當我使用jquery動態添加表中的行而不是動態插入數據時，表中添加了未定義的行。

enter image description here 這是表單，當我添加數據時，而不是數據添加未定義。

var employee = { 
     ID: 0, 
     Name: "", 
     LastName: "" 
    }; 

    function addEmployee(employee) 
    { 
     debugger; 
     alert(employee.ID); 
     $.ajax({ 
      url: "http://localhost:51640/employee/createemployee", 
      type: 'POST', 
      contentType: 
       "application/json;charset=utf-8", 
      data: JSON.stringify(employee), 
      success: function (employee) {      
       employeeAddSuccess(employee); 
      },       
     }); 
    } 



    function employeeAddSuccess(employee) { 
     alert(employee.Name);   
     employeeAddRow(employee);    
     alert("about to clear "); 
     formClear(); 
     alert("successfully addded"); 
    } 

    function employeeAddRow(employee) { 
     alert(employee.ID); 
     $("#employeeTable tbody").append(employeeBuildTableRow(employee)); 
    } 
    function formClear() { 
     $("#lblempID").val(""); 
     $("#lblEmpName").val(""); 
     $("#lblEmpLastName").val(""); 
    } 
    function addClick() { 
     formClear(); 
    } 

    function employeeBuildTableRow(employee) { 
     debugger; 
     var ret = 
      "<tr>" + 
      "<td>" + employee.ID + "</td>" + 
      "<td>" + employee.Name + "</td>" 
      + "<td>" + employee.LastName + "</td>" + 
      "</tr>"; 
     alert(ret); 
     return ret; 
    } 


    function updateClick() { 
     // Build product object from inputs 
     employee = new Object(); 
     employee.ID = $('#lblempID').val(); 
     employee.Name = $('#lblEmpName').val(); 
     employee.LastName = $('#lblEmpLastName').val(); 
     addEmployee(employee);   
    } 

Answer 1

你不應該字符串化要發送數據，請嘗試：

function addEmployee(employee) 
    { 
     debugger; 
     console.log(employee); // verify the data that will be sent to the server 
     $.ajax({ 
      url: "http://localhost:51640/employee/createemployee", 
      type: 'POST', 
      dataType:'json' 
      contentType: 
       "application/json;charset=utf-8", 
      data: employee, 
      success: function (result) { 
       console.log(result); // verify the result coming back     
       employeeAddSuccess(result); 
      }, 
      fail: function (error) { 
       console.log(error); // if there's an error, log that too 
      } 
     }); 
} 

你也應該登錄服務器時，接收到的數據會發生什麼，它可能是在「未定義' 發生。

我假設你也需要錯誤處理服務器端來獲得有意義的結果在你的ajax調用的fail回調。上面的代碼可以幫助您標記問題來自哪裏。

最後，對於一切代碼的愛，不要使用警報進行調試！ console.log的作品也一樣，不會阻止你的應用程序/惹惱所有參與者的地獄:)