Ajax和Php，创建关系表后，不显示插入的数据

Question

我是 Ajax 和 Php 的新手，我想用 Bootstrap Modal、Ajax 和 Php 解决我对 Mysql 表中的 isert 数据的疑问。

所以，我有一个名为“tbl_employee”的表和一个名为“index.php”的页面。

在“index.php”中，我有一个 Bootstrap 模式按钮，当用户点击时效果很好。用户单击此按钮后，引导模式显示一个表单，当用户完成时，它会单击该按钮。点击“Insert”按钮后，用户输入的所有数据，正常存储在“tbl_employee”中。

但是当我在“tbl_employee”表中与另一个调用“tipo_ps”的表创建关系时，用户不能再通过 Bootstrap 模态表单在 Mysql 中插入数据。下面我打印了一张图片来显示我为与“tbl_employee”表建立关系而创建的列：

Relationship - Mysql table

在“index.php”页面我有下面的 Ajax 代码：

<script>  
$(document).ready(function(){
 $('#insert_form').on("submit", function(event){  
     var tipo=$("#tipo").val();
  event.preventDefault();  
  if($('#name').val() == "")  
  {  
   alert("Name is required");  
  }  
  else if($('#address').val() == '')  
  {  
   alert("Address is required");  
  }  
  else if($('#designation').val() == '')
  {  
   alert("Designation is required");  
  }
   
  else  
  {  
   $.ajax({  
    url:"insert.php",  
    method:"POST",  
    data: $('#insert_form').serialize(),
    beforeSend:function(){  
     $('#insert').val("Inserting");  
    },  
   success:function(data){  
     $('#insert_form')[0].reset();  
     $('#add_data_Modal').modal('hide');  
     $('#employee_table').html(data);
    }  
   });  
  }  
 });
</script>

如果我不创建任何关系表，上面的代码可以正常工作。下面是负责在“tbl_employee”表中插入数据的代码（insert.php）。当我创建关系时，我在代码中插入了“tipo”列：

<?php
include 'dbconnect.php';
if(!empty($_POST))
{
 $output = '';
 $tipo = mysqli_real_escape_string($conn, $_POST['tipo']); 
 $name = mysqli_real_escape_string($conn, $_POST['name']);  
    $address = mysqli_real_escape_string($conn, $_POST['address']);  
    $gender = mysqli_real_escape_string($conn, $_POST['gender']);  
    $designation = mysqli_real_escape_string($conn, $_POST['designation']);  
    $age = mysqli_real_escape_string($conn, $_POST['age']);
    $query = "
    INSERT INTO tbl_employee(tipo, name, address, gender, designation, age)  
     VALUES('$tipo', '$name', '$address', '$gender', '$designation', '$age')
    ";
    if(mysqli_query($conn, $query))
    {
     $output .= '<label class="text-success">Data Inserted</label>';
     $select_query = "SELECT tbl_employee.id, tbl_employee.tipo, tbl_employee.name, tipo_ps.tipo FROM (tbl_employee INNER JOIN tipo_ps ON tbl_employee.tipo = tipo_ps.tipo_id)";
     $result = mysqli_query($conn, $select_query);
     $output .= '
      <table class="table table-bordered">  
                    <tr>  
                         <th width="70%">Tipo</th>  
                         <th width="70%">Name</th>
                         <th width="30%">View</th>  
                    </tr>

     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
       <tr>  
                         <td>' . $row['tipo'] . '</td>  
                         <td>' . $row['name'] . '</td>
                         <td><input type="button" name="view" value="view" id="' . $row['id'] . '" class="btn btn-info btn-xs view_data" /></td>  
                    </tr>
      ';
     }
     $output .= '</table>';
    }
    echo $output;
}
?>

正如我上面所解释的，当用户单击引导模式表单上的插入按钮时，“index.php”页面中不会显示任何内容，如下图所示：

Modal Form - Insert Button

Blank page after clicked on "Insert button"

但是，如果删除我创建的关系一切正常。

在这种情况下，如果可能的话，我应该怎么做才能在“tbl_employee”表中插入数据并创建关系？

非常感谢大家。

Answer 1

所以问题出在选项标签上：

    if($rowCount > 0) {
        while($row = $query->fetch_assoc()) {  
            echo '<option value="">'.$row['tipo'].'</option>';
        }
    } else {
        echo '<option value="">Tipo não encontrado</option>';
    }

在插入查询中，$tipo 值为空，

$query = "INSERT INTO tbl_employee(tipo, name, address, gender, designation, age)  
VALUES('$tipo', '$name', '$address', '$gender', '$designation', '$age')
";

所以改成：

if($rowCount > 0) {
    while($row = $query->fetch_assoc()) { 
        echo '<option value="'.$row['tipo_id'].'">'.$row['tipo'].'</option>';
    }
} else {
    echo '<option value="">Tipo não encontrado</option>';
}