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');?>" />

Ajax将数据附加到现有表

2 个答案: