기존 테이블에 데이터를 추가하는 Ajax

한동안 이것에 있었고 나는 붙어 있습니다. 테이블과 같은 페이지의 데이터를 표시하려고하면 테이블에 데이터를 추가하는 입력 양식이 있습니다.

스크립트

$(function(){
var url = '<?php echo base_url();?>assets/includes/em_report_get_intervals.php';
$.getJSON(url, function(data) {
    $.each(data, function(index, data) {
    $('#tablebody').append('<tr>');
    $('#tablebody').append('<td>'+data.em_service_level+'</td>');
    $('#tablebody').append('<td>'+data.em_speed_of_answer+'</td>');
    $('#tablebody').append('<td>'+data.em_volume+'</td>');
    $('#tablebody').append('</tr>');
    });
});

$('#myForm').on('submit',function(e) {  
    $.ajax({
        url:'<?php echo base_url();?>assets/includes/em_report_write_interval.php',
        data:$(this).serialize(),
        type:'POST',
        success:function(data){

            var em_service_level = $('#em_service_level').val();
            var em_speed_of_answer = $('#em_speed_of_answer').val();
            var em_volume = $('#em_volume').val();

            $('#tablebody').append('<tr>');
            $('#tablebody').append('<td>'+em_service_level+'</td>');
            $('#tablebody').append('<td>'+em_speed_of_answer+'</td>');
            $('#tablebody').append('<td>'+em_volume+'</td>');
            $('#tablebody').append('</tr>');            
        },
        error:function(data){
        $("#error").show().fadeOut(5000); //===Show Error Message====
        }
    });
    e.preventDefault();
});});

레코드를 표시 할 테이블

<table class="table_data">
 <thead>
  <tr>
   <th>em_service_level</th>
   <th>em_speed_of_answer</th>
   <th>em_volume</th>
  </tr>
 </thead>
 <tbody id="tablebody">
 </tbody>
</table>

참가 신청서

<form class="form2" action="" method="POST" name="myForm" id="myForm">
  <input type="text" name="em_service_level" class="text_box" size="20" value="<?php echo set_value('em_service_level');?>" />
  <input type="text" name="em_speed_of_answer" class="text_box" size="20" value="<?php echo set_value('em_speed_of_answer');?>" />
  <input type="text" name="em_volume" class="text_box" size="20" value="<?php echo set_value('em_volume');?>" />
  <input type="submit" name="submit_interval" id="submit_interval" class="normal_button" value="Add Interval" />
</form>

em_report_write_interval.php

if(isset($_POST['em_service_level']))
{
$em_service_level   = $_POST['em_service_level'];
$em_speed_of_answer = $_POST['em_speed_of_answer'];
$em_volume          = $_POST['em_volume'];

$query = "
    INSERT INTO ajax_test(
        `em_service_level`,
        `em_speed_of_answer`,
        `em_volume`
        ) VALUES (
        '$em_service_level',
        '$em_speed_of_answer',
        '$em_volume'
        )";

mysql_query($query);
}

이제 문제는 양식에 데이터를 추가 할 때를 제외하고는 모두 기술적으로 작동한다는 것입니다. 테이블에 추가되지만 추가 한 값 대신 페이지를 새로 고칠 때까지 "정의되지 않음"으로 표시됩니다. 그런 다음 값이 표시됩니다.

이 코드는 내가 찾은 예제에서 해킹되어 작업을 시도하고 있으므로 내 엉성함을 용서하십시오.