我在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">×</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,我不确定问题出在哪里。
答案 0 :(得分:0)
Rahter比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)
*
*/
});
}