Ajax将数据附加到现有表

Question

在这里呆了一段时间，我被困住了。 试图显示表中的数据和在同一页面上，有一种输入表格来向表中添加数据。

脚本

$(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);
}

现在，我的问题是，除了将数据添加到表单中之外，所有这些技术上都可行。 它追加到表中，但是在刷新页面之前，我看到的只是“未定义”，而不是我添加的值。 然后显示值。

该代码是从我发现的示例中获取的，并且正在尝试使之工作，因此请原谅我的草率。

Answer 1

您使用的是name ，而不是id。 因此需要更正选择器：

var em_service_level = $('input[name="em_service_level"]').val();
var em_speed_of_answer = $('input[name="em_speed_of_answer"]').val();
var em_volume = $('input[name="em_volume"]').val();

Answer 2

在您的表格中，您有：

<input type="text" name="em_service_level" 
class="text_box" size="20" 
value="<?php echo set_value('em_service_level');?>" />

在ajax回调函数中，您尝试选择它们，就像它们具有id属性一样，而没有。

因此，更改您的元素并添加一个ID，或更改您的jquery选择器。 前者比较容易。 对于第一个输入，您将获得：

                                           |
                                           v
<input type="text" name="em_service_level" id="em_service_level"
class="text_box" size="20" 
value="<?php echo set_value('em_service_level');?>" />