引导模式不显示信息答案

【问题标题】：Bootstrap modal does not showing information引导模式不显示信息
【发布时间】：2017-07-20 12:01:00
【问题描述】：

我已经进入了 6 个月的实习期，我目前正在使用 Bootstrap modal 开发一个 Web 系统。我遇到了一个问题，即我的模态视图无法显示任何信息。脚本中没有错误，但我不知道如何修复它。它只是空白。有什么建议吗？

这是人员详细信息的模态视图，未显示任何信息：

以下是用于显示模态视图的两个文件中的代码。

index.html

<?php  
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_user ORDER BY user_id DESC";
$result = mysqli_query($connect, $query);
 ?>  
<!DOCTYPE html>  
<html>  
 <head>  
  <title>ADD NEW USER</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
  <br /><br />  
  <div class="container" style="width:700px;">  
   <h3 align="center">Admin Log Site </h3>  
   <br />  
   <div class="table-responsive">
    <div align="right">
     <button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add New User</button>
    </div>
    <br />
    <div id="employee_table">
     <table class="table table-bordered">
      <tr>
       <th width="70%">Staff Name</th>  
       <th width="30%">View</th>
      </tr>
      <?php
      while($row = mysqli_fetch_array($result))
      {
      ?>
      <tr>
       <td><?php echo $row["uname"]; ?></td>
       <td><input type="button" name="view" value="view" id="<?php echo $row["user_id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
      </tr>
      <?php
      }
      ?>
     </table>
    </div>
   </div>  
  </div>
 </body>  
</html>  

<!-- modal insert division -->

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">ADMIN SITE</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
     <label>Enter Staff Username</label>
     <input type="text" name="uname" id="uname" class="form-control" />
     <br />
     <label>Enter Staff ID</label>
     <input type="text" name="staff_number" id="staff_number" class="form-control"  />
     <br />
     <label>Staff Roles</label>
     <select name="staff_role" id="staff_role" class="form-control">
      <option value="Administration">Administration</option>  
      <option value="Project Manager">Project Manager</option>
      <option value="Staff">Staff</option>
     </select>
     <br />  
     <label>Password</label>
     <input type="text" name="password" id="password" class="form-control" />
     <br />  

     <input type="submit" name="insert" id="insert" value="Add user" class="btn btn-success" />

    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

<!-- modal view employer -->

<div id="dataModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Staff Details</h4>
   </div>
   <div class="modal-body" id="employee_detail">

   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

<script>  
$(document).ready(function(){
 $('#insert_form').on("submit", function(event){  
  event.preventDefault();  
  if($('#uname').val() == "")  
  {  
   alert("Name is required");  
  }  
  else if($('#staff_number').val() == "")  
  {  
   alert("Staff id is required");  
  }  
  else if($('#staff_role').val() == "")
  {  
   alert("Staff role is required");  
  }
  else if($('#password').val() == "")
  {  
   alert("password is required");  
  }


  else  
  {  
   $.ajax({  
    url:"insertdata.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);  
    }  
   });  
  }  
 });




 $(document).on('click', '.view_data', function(){
  //$('#dataModal').modal();
  var user_id = $(this).attr("user_id");
  $.ajax({
   url:"view.php",
   method:"POST",
   data:{user_id:user_id},
   success:function(data){
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
   }
  });
 });
});  
 </script>

查看信息如下。

view.php

    <?php  
//select.php  
if(isset($_POST["user_id"]))
{
 $output = '';
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["user_id"]."'";
  //$query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["id"]."'";
 $result = mysqli_query($connect, $query);
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';
    while($row = mysqli_fetch_array($result))
    {
     $output .= '
     <tr>  
            <td width="30%"><label> Staff Name</label></td>  
            <td width="70%">'.$row["uname"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Staff Id</label></td>  
            <td width="70%">'.$row["staff_number"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Staff Role</label></td>  
            <td width="70%">'.$row["staff_role"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>password</label></td>  
            <td width="70%">'.$row["password"].'</td>  
        </tr>

     ';
    }
    $output .= '</table></div>';
    echo $output;
}
?>

【问题讨论】：

请花点时间阅读：stackoverflow.com/help/mcve
此处信息不足，无法回答/理解您的问题。
对此感到抱歉。我已经改进了我的问题。
感谢您提供新信息。它帮助我理解了您的问题并编辑了您的问题，使您的问题更加清晰。
您能否将您的成功函数更改为success:function(data){ console.log(data);} 并将记录的内容发布到控制台。

标签： javascript ajax bootstrap-modal

【解决方案1】：

您的问题是您的$.ajax POST 正在发送JSON 数据，但您的PHP 视图正在寻找$_POST 中的项目。

要设置$_POST 值试试这个：

$.ajax({
  url: "view.php",
  method: "POST",
  data: "user_id="+user_id,
  success: function(data) {
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
  }
});

注意：通常您的输入元素将位于<form> 标记内。如果它们是，您可以使用 $('#formid').serialize() 将输入元素转换为字符串，您可以将其作为数据变量传递给 ajax 调用。

例如：

<form id="getUserDetails">
    <label for="user_id">A bar</label>
    <input id="user_id" name="user_id" type="text" value="" />
    <input type="submit" value="Send" onclick="PostThis();return false;
 />
</form>

var data = $('#getUserDetails').serialize();
$.ajax({
    url: "test.php",
    type: "post",
    data: data ,
    success: function (response) {
       $('#employee_detail').html(response);
        $('#dataModal').modal('show');              

    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }


});

【讨论】：

感谢您的解释。我会为这个答案而努力。感谢你的回答。它帮助我弄清楚我的代码出了什么问题。再次感谢@Alexander。你的反应很好。