使用AJAX调用PHP（通过MSQL）并填充引导程序模式

Question

我在HTML表格上有一个用户列表，当我单击一个条目时，我通过AJAX进行了模式加载，该模式应使用该用户的所有相关信息填写表格。 然后可以更改信息并通过更改提交。

我无法摆脱要加载的模态，也无法获取要加载到模型中的数据。

这是脚本：

<script>
$('#editUserModel').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('userID')

         $(function () 
          {

            $.ajax({                                      
              url: 'getUser.php?id=',                          
              data: "recipient",                        

              dataType: 'json',                    
              success: function(data)          
              {
                var id = data[0];              //get id
                var firstName = data[1];       //get name etc...
                var lastName = data[2];
                var username = data[3];
                var password = data[4];
                var jobTitle = data[5];
                var TaskTeam = data[6];
                var admin = data[12];

                var modal = $(this)
                modal.find('.modal-body input').html(username)

              } 
            });
          }); 


    })
</script>

这是列出用户的PHP（有效，当我单击“编辑”按钮时，模式加载，但是模式显示为灰色，不显示任何基础数据）

<?php 
include("dbconnect.php"); 

$dbQuery= mysql_query("SELECT * FROM users ORDER BY jobTitle ASC;"); 

while($dbRow = mysql_fetch_array($dbQuery))
{
$userID = $dbRow['id'];
$username = $dbRow['username'];
$firstName = $dbRow['firstName'];
$lastName = $dbRow['lastName'];
$jobTitle = $dbRow['jobTitle'];
$userteam = $dbRow['TaskTeam'];

echo '<tr>';
echo '<td>';
echo '<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModel" data-userID='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button>';
echo '</td>';

echo '<td>'.$firstName.'</td>';
echo '<td>'.$lastName.'</td>';
echo '<td>'.$jobTitle.'</td>';
echo '<td>'.$userteam.'</td>';
echo '<td></td>';

/*
echo '<td>';



echo '</td>';
*/

echo '</tr>';
}

echo mysql_error();
mysql_close();

?>

这是模态div：

<div class="modal fade" id="editUserModel" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="editModalLabel"></h4>
      </div>
      <div class="modal-body">
        <form>
            <div class="form-group">
                <label for="username" class="control-label">Username:</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="form-group">
                <label for="password" class="control-label">Password:</label>
                <input type="text" class="form-control" id="password">
            </div>
            <div class="form-group">
                <label for="firstName" class="control-label">First Name:</label>
                <input type="text" class="form-control" id="firstName">
            </div>
            <div class="form-group">
                <label for="lastName" class="control-label">Surname:</label>
                <input type="text" class="form-control" id="lastName">
            </div>
            <div class="form-group">
                <label for="jobTitle" class="control-label">Job Title:</label>
                <input type="text" class="form-control" id="jobTitle">
            </div>
            <div class="form-group">
                <label for="TaskTeam" class="control-label">Task Team:</label>
                <input type="text" class="form-control" id="TaskTeam">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit Changes</button>
      </div>
    </div>
  </div>
</div>

这是检索用户数据的php文件：

<?php
  $userID = intval($_GET['id']);
  include("dbconnect.php"); 

  $sql="SELECT * FROM users WHERE id = $userID";
  $result = mysql_query($sql);
  $array = mysql_fetch_row($result);    

  echo json_encode($array);

  mysql_close();
?>

我不完全了解PDO，我不确定问题出在哪里。

Answer 1

比mysql适合使用mysqli 。 另外，由于您需要遍历行结果，因此发生了问题。 尝试这个：

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 


$userID = intval($_GET['id']);
$sql="SELECT * FROM users WHERE id = $userID";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $array = array();
    while($row = $result->fetch_assoc()) {
        array_push($array, $row);
    }
    echo json_encode($array);
} else {
    echo "0 results";
}
$conn->close();

然后在您的JS中，将.success的内容替换为：

success: function(data) {
    var obj = JSON.parse(data);
        $.each(obj, function(key, val) {
            console.log(val);
            //add your functions here

            /*
             var id = data[0];              //get id
             var firstName = data[1];       //get name etc...
             var lastName = data[2];
             var username = data[3];
             var password = data[4];
             var jobTitle = data[5];
             var TaskTeam = data[6];
             var admin = data[12];

             var modal = $(this)
             modal.find('.modal-body input').html(username)
            * 
            */
        });
}