Ajax 将数据附加到现有表答案

【问题标题】：Ajax appending data to existing tableAjax 将数据附加到现有表
【发布时间】：2014-02-01 07:45:12
【问题描述】：

已经有一段时间了，我被困住了。尝试显示表格中的数据并在同一页面上，有一个条目表单可以将数据添加到表格中。

脚本

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

现在我遇到的问题是，这在技术上都是可行的，除非我将数据添加到表单中。它附加到表中，但不是我添加的值，我看到的只是“未定义”，直到我刷新页面。然后显示值。

这段代码是从我找到的示例中窃取的，我正在努力工作，所以请原谅我的马虎。

【问题讨论】：

不要将 html 分解为单独的 open tr、td、td...close tr。将所有这些组合成一个字符串并 $().append 。
您将得到“未定义”，因为未找到该值 - 正如我现在看到的那样，安德烈已正确解释。
类似stackoverflow.com/questions/12948853/…

标签： javascript php jquery mysql ajax

【解决方案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();

【讨论】：

做到了！非常感谢！

【解决方案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');?>" />

【讨论】：