打印JSON(从PHP)通过Ajax来一个引导模式模式、JSON、PHP、Ajax

2023-09-10 20:22:47 作者:她、哭蓝了那片海

现在这一次似乎有点复杂,也许我已经开始学着比我更可以管理,但似乎我能做到什么,我需要的唯一途径。

Now this one seems a little complicated and maybe I have got myself into more than I can manage but it seems the only way I can achieve what I need.

我是一个完整的新手,并打算在此盲目的项目我的工作(这是最复杂的事情,在整个项目中),所以任何帮助将是非常美联社preciated!

I am a complete novice and am going at this blindly for a project I'm working on (this is the most complicated thing in the whole project) so any help would be much appreciated!

我基本上有一个引导的网页,此网页显示一个用户列表(从PHP在一个while循环)。我需要的用户可以做的就是从这个选择用户,并在引导模式编辑表单中的细节。

I basically have a bootstrap webpage, this webpage displays a users list (from php in a while loop). What I need the user to be able to do is select a user from this and edit the details in a form in a bootstrap modal.

到目前为止,我拥有了一切工作,莫代尔加载等,并从各种来源网上已经发生了口角JSON,但我从来没有学过它,我的出路我的深处。目前正在打印[对象HTMLCollection]'中的每个字段。

So far I have everything working, modal loading etc and from various sources online have wrangled JSon but I've never learnt it and am way out of my depths. Currently it is printing '[object HTMLCollection]' in each field.

首先这里是HTML的模式和放大器;清单:

Firstly here is the HTML for the modal & list:

模态(这来了完美的)

<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列表:(在这里再次没有问题)

Here is the php list: (again no trouble here)

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

?>

下面是问题,必须打好:

Here is where the problem must lay:

<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-这是它的大部分不包括密码等)

Lastly here is php file to get the user details: (This works too but only is done manually- This is the bulk of it excluding passwords etc)

// 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的我知道这是最新的标准和我目前正在实施它在这个项目。

Sorry for lack of Mysqli I know this is the latest standard and am currently implementing it in this project.

任何帮助将是巨大的!谢谢

Any help would be great! Thanks

推荐答案

您code的问题是在这里:

The problem with your code is here:

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回来。你这样做与数据类型:JSON。因此,没有理由在这里做到这一点: VAR OBJ = JSON.parse(数据); 。既然你说你的AJAX调用你要接受JSON回来,它会自动解析为你的PHP脚本完成时。

You've already told your AJAX call that you are expecting JSON back from your PHP script. You did this with dataType: "json". So there is no reason to do this here: var obj = JSON.parse(data);. Since you told your AJAX call you are going to receive JSON back, it automatically parses it for you when the PHP script completes.

要访问的数据简单地使用语法。例如, data.firstName

To access the data simply use the . syntax. For example, data.firstName

此外,您可能需要需要在你的PHP文件从

Also, you may need to need to change this line in your PHP file from

echo json_encode($array);

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

另外,你的PHP脚本需要一些清理:

Also, your PHP script needed some cleaning up:

<?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();
?>
 
精彩推荐
图片推荐