2015-04-16 35 views
1

现在这一个似乎有点复杂,也许我已经让自己超过我可以管理,但它似乎是我能达到我需要的唯一途径。打印JSON(从一个PHP)通过AJAX到引导模式

我是一个完整的新手,我正在为这个项目工作(这是整个项目中最复杂的事情),所以任何帮助将非常感谢!

我基本上有一个引导网页,这个网页显示一个用户列表(从一个while循环php)。我需要用户能够做的是从中选择一个用户,并以引导模式的形式编辑详细信息。

到目前为止,我有一切工作,模态加载等,并从各种来源网上争吵JSon,但我从来没有学到它,并且我的方式走出我的深渊。目前它正在每个字段中打印'[object HTMLCollection]'。

首先这里是模态&列表中的HTML:

模态(这完全出现)

<div class="modal fade" id="editUserModal" 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> 
      <h2 class="modal-title" id="editModalLabel"></h2> 
      </div> 
      <div class="modal-body"> 
      <form> 
       <div class="form-group"> 
        <label for="username" class="control-label">Username:</label> 
        <input type="text" name="username" class="form-control" id="username"></input> 
       </div> 
       <div class="row"> 
       <div class="col-lg-12"> 
        <div class="form-group"> 
         <label for="password" class="control-label">Password:</label> 
          <div class="input-group"> 
           <span class="input-group-btn"> 
           <input type="button" class="form-control" value="Change Password" onClick="changeRandomPassword();">&nbsp; 
           </span> 
           <input type="text" name="password" class="form-control" id="password" value="" required></input> 
          </div> 
        </div> 
       </div> 
      </div> 
       <div class="form-group"> 
        <label for="firstName" class="control-label">First Name:</label> 
        <input type="text" name="firstName" class="form-control" id="firstName"> 
       </div> 
       <div class="form-group"> 
        <label for="lastName" class="control-label">Surname:</label> 
        <input type="text" name="lastName" class="form-control" id="lastName"> 
       </div> 
       <div class="form-group"> 
        <label for="jobTitle" class="control-label">Job Title:</label> 
        <input type="text" name="jobTitle" class="form-control" id="jobTitle"> 
       </div> 
       <div class="form-group"> 
        <label for="TaskTeam" class="control-label">Task Team:</label> 
        <input type="text" name="TaskTeam" class="form-control" id="TaskTeam"> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      <button type="button" class="btn btn-success">Submit Changes</button> 
      </div> 
     </div> 
     </div> 
    </div> 

这里是PHP的列表:(在这里再次没有麻烦)

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

$dbQuery= mysql_query("SELECT * FROM users ORDER BY lastName 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']; 
$admin = $dbRow['admin']; 

echo '<tr>'; 
echo '<td>'; 
echo '<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$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>'.$admin.'</td>'; 

echo '<td>'; 
echo '<a href="deleteUser.php?id='.$userID.'">'; 
echo '<button type="button" name="delete_row" id="delete_row" class="close">'; 
echo '<span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash">'; 
echo '</span>'; 
echo '<span class="sr-only">'; 
echo 'Delete'; 
echo '</span>'; 
echo '</button>'; 
echo '</a>'; 
echo '</td>'; 

echo '</tr>'; 
} 

echo mysql_error(); 
mysql_close(); 

?> 

这里是问题所在:

<script> 
    $('#editUserModal').on('show.bs.modal', function (event) 
    { 
     var button = $(event.relatedTarget) 
     var recipient = button.data('user') 
     var modal = $(this) 
     modal.find('.modal-title').text('Edit ' + recipient + "'s details.") 
     $(function() 
      { 
      $.ajax(
      { 
       type: 'GET', 
       url: "getUser.php?id=",    
       data: 'recipient', 
       dataType: "json", 
       success: function(data) 
       { 
        var obj = JSON.parse(data); 
        $.each(obj, function(key, val) 
        { 
         console.log(val);   
         var id = data[0];    
         var firstName = data[1];  
         var lastName = data[2]; 
         var username = data[3]; 
         var password = data[4]; 
         var jobTitle = data[5]; 
         var TaskTeam = data[6]; 
         var admin = data[12];  
        }); 
       } 
      }) 
     }) 
     modal.find('.modal-body #firstName').val(firstName) 
     modal.find('.modal-body #lastName').val(lastName) 
     modal.find('.modal-body #username').val(username) 
     modal.find('.modal-body #password').val(password) 
     modal.find('.modal-body #jobTitle').val(jobTitle) 
     modal.find('.modal-body #TaskTeam').val(TaskTeam) 
    }) 
</script> 

最后这里是php文件,以获得用户的详细信息:(此作品太多,但仅完成manually-这是大宗它不包括口令等)

// 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); 

/* 
$user = array(); 
while ($row = mysql_fetch_array($result)) { 
    $details = array(
    "username"   => $row['username'], 
    "firstName"   => $row['firstName'], 
    "lastName"   => $row['lastName'], 
    "taskTeam"   => $row['taskTeam'] 
); 
    $user[] = $details; 
} 
echo json_encode($user); 
$conn->close(); 
*/ 

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(); 

对不起,缺乏的mysqli的,我知道这是最新的标准,目前正在实施这个项目。

任何帮助将是伟大的!由于

+0

尝试检查网络选项卡您的开发人员工具以查看回复正文并发布以及 –

+0

@ ste-fu当前正在使用Notepad ++并通过FTP检查更改并在浏览器中检查更改。不知道如何得到响应机构... – JoshM

回答

1

与您的代码的问题是在这里:

var obj = JSON.parse(data); 
$.each(obj, function(key, val) 
{ 
    console.log(val);   
    var id = data[0];    
    var firstName = data[1];  
    var lastName = data[2]; 
    var username = data[3]; 
    var password = data[4]; 
    var jobTitle = data[5]; 
    var TaskTeam = data[6]; 
    var admin = data[12];  
}); 

你已经告诉你的AJAX调用,你是从你的PHP脚本期待JSON回来。你用dataType: "json"做了这个。所以这里没有理由这样做:var obj = JSON.parse(data);。既然你告诉你的AJAX调用,你将接收到JSON,当PHP脚本完成时它会自动为你解析它。

要访问数据,只需使用.语法。例如,data.firstName

此外,您可能需要需要从

echo json_encode($array); 

在你的PHP文件,以更改此行以

header('Content-Type: application/json'); 
echo json_encode($array); 

而且,你的PHP脚本需要一些清理:

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

$dbQuery = mysql_query("SELECT * FROM users ORDER BY lastName 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']; 
    $admin  = $dbRow['admin']; 

    echo ' 
    <tr> 
     <td> 
      <button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button> 
     </td> 
     <td>'.$firstName.'</td> 
     <td>'.$lastName.'</td> 
     <td>'.$jobTitle.'</td> 
     <td>'.$userteam.'</td> 
     <td>'.$admin.'</td> 
     <td> 
      <a href="deleteUser.php?id='.$userID.'"> 
       <button type="button" name="delete_row" id="delete_row" class="close"> 
        <span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash"></span> 
        <span class="sr-only">Delete</span> 
       </button> 
      </a> 
     </td> 
    </tr>'; 
} 

echo mysql_error(); 
mysql_close(); 
?> 
+0

是的! OMG它工作!你不知道我有多感激。已经坚持了近一个月,没有得到我的教授的帮助!我该如何报答你!我甚至没有rep15来提高答案,只有13。你在推特等?哈哈再次感谢 – JoshM

+0

真棒,我很高兴它为你工作。没有,没有Twitter帐户,只是stackoverflow。让我知道,如果我可以帮助其他任何事情。上帝保佑! – three3

+0

没有认真的谢谢,任何想法如何使用复选框在这里?所以如果一个值被返回,它会检查模态中的复选框?我不需要太多 – JoshM