JQueryを使用してテーブル内に行を動的に追加すると、未定義が追加される

Question

動的に挿入されたデータの代わりにjqueryを使用してテーブル内に行を動的に追加すると、テーブル行に未定義が追加されます。

これは、データを追加するときに、データの代わりに定義されていない形式です。

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はまったく同様に動作し、アプリケーションをブロックしません/関係するすべての人の邪魔にならないでください:)