PHP上的Jquery从另一个文件创建HTML内容

Jquery on PHP created HTML content from a different file

本文关键字:文件创建 HTML 内容 另一个 上的 Jquery PHP      更新时间:2023-09-26

首先,我是一个完全的PHP/AJAX初学者,如果我在接下来的帖子中没有正确解释某些内容,请提前表示歉意。

所以,长话短说:我正在用PHP/AJAX创建一个简单的管理场景(编辑用户内容)。我无法弄清楚如何通过jQuery .post()生成的HTML内容。

用更简单的话来说:

我有一个admin_panel.php页面,它生成所有用户的下拉列表。在下拉选择,我然后使用jQuery .post()和发送一个选定的用户名到info.php,以获得有关该用户名的更多信息。php回显表中所有查询的数据。

现在在这个PHP生成的表中(每个信息块在一个'td'标记中),我放置了一个输入文本字段,我想使用另一个.post() -我希望能够让管理员更新它。

你们能告诉我怎么做吗?我尝试添加"脚本"标签内的回声内容,但它不起作用,当我尝试和选择从admin_panel.php回声表也不起作用(这是直接的,因为表不在源代码,所以我不能选择一个id从它)。

admin_panel.php(仅相关内容)

<select name='users' id='users'>
    <option value="" disabled selected>Select user</option>
        <?php
            $sql = mysql_query("SELECT * FROM users WHERE id <>'".$_SESSION['user_id']."'ORDER BY username DESC") or die(mysql_error());
                while($row=mysql_fetch_assoc($sql)){
                    $username=$row['username'];
                    echo "<option value='".$username."'>".$username.'</option>';
                }
        ?>
</select>
<script type="text/javascript">
    $(document).ready(function(){
        $('#users').change(function(event) {
            $.post('info.php', { selected: $('#users').val() },
                function(data) {
                    $('#user_info').html(data);
                }
            );            
        }); 
        $( '#about_change' ).focusout( function(){
            $.post( "update.php?about_change=true&userid=true", {
                    about_change : $ ('#about_change').val(),
                    userid : $user_id
                },
                function( data ){
                    $('#change_about_admin').html( data );
                }
            )   
        });
    });
    </script>

第一个.post()工作良好。我不知道如何接近第二个。第二个jQuery函数中的"#about_change"是服务器从info.php查询中发回的内容。

update.php?about_change=true&userid=true是正确的吗?$user_id是一个变量,显示在"获取所有用户"查询info.php中的一个"td"标签中。

info.php(也只有相关的内容)

$selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';
$sql=mysql_query("SELECT * FROM users WHERE username='".$_POST['selected']."'");
while($row = mysql_fetch_assoc($sql)){
    $user_id = $row['id'];
    $username = $row['username'];
    $name = $row['name'];
    $date = $row['date'];
    $email = $row['email'];
    $avatar = $row['avatar'];
    $about = $row['about'];
    $admin = $row['admin'];
}
echo("
<table id='user_table'>
<tr colspan='8'>
    <th>User ID</th>
    <th>Username</th>
    <th>Joined</th>
    <th>Name</th>
</tr>
<tr>    
    <td>".$user_id."</td>
    <td>".$username."</td>
    <td>".$date."</td>
    <td>".$name."<br/><a class='change_admin' href='#'>Change</a></td>
</tr>
<tr colspan='8'>
    <th>About</th>
    <th>E-mail</th>
    <th>Avatar</th>
    <th>Admin</th>
</tr>
<tr colspan='8'>
    <td>".$about."<br/><a id='change_about_admin' href='#'>Change</a><br/><input type='text' id='about_change' name='about_change'></td>
    <td>".$email."<br/><a class='change_admin' href='#'>Change</a></td>
    <td><img class='avatar_small' src='$avatar' /><br/><a class='change_admin' href='#'>Delete</a></td>
    <td>");
    if(isAdmin($user_id) == 1){
        echo "Yes";
    }
    else
        echo "No";
echo ("<br/><a class='change_admin' href='#'>Change</a></td>
</tr>
<tr>
    <td colspan='8'>
        <a href='#'>DELETE THIS ACCOUNT</a>
    </td>
</tr>
</table>
");

update.php

if(isset($_POST['about_change']) && isset($_POST['uderid'])){
    $about_change = $_POST['about_change'];
    $userid = $_POST['userid'])
    echo update($userid, 'about', $about_change);
}

我相信你正在尝试做的是向用户展示用户的下拉列表,当被选中时,将显示该用户的详细信息表和一些将由javascript触发的操作。

我的建议是,保持你的文件模块化,这样更容易管理。这里有一个非常基本的例子,根据我的理解,这是我所知道的最佳实践。我希望你明白我的意思。

users.php

<?php
    // Get your users from DB and tabulate into $userList. 
    $username = 'Example';
    $userlist = [];
    $userList .= '<option name="userID" value="$userID">'.$username.'</option>'
?>
<select id="users">
    <option selected>Select Users</option>
    <?php echo $userList; ?> <!-- This will be generated by php in the script below -->
</select>
<section id="userDetailContainer">
    <!-- This will contain the user detail table -->
</section>
// Include the javascript.
<script src="functions.js"></script>

functions.js

$(function(){
    var theURL = 'processUser.php'
    var data = {}
    $('#users').on('change', function(){
         data.command = 'displayUser'
         data.userID = $(this).val()
         $.post(theURL, data, function(result){
             $('#userDetailContainer').html(result)
         })
    })
    // This is where you assign event on dynamic contents.
    $('#userDetailContainer').on('focusout', '#username', function(e){
        data.username = $(this).val()
        data.command = 'updateUsername'
        $.post(theURL, data, function(result){
            //Do what you want with the response.
            console.log(result)
        })
    })
})

processUser.php

<?php
    //Insert MySQL here...
    if(isset($_POST['command']){
        $cmd = $_POST['command'];
        $userID = $_POST['userID'];
        $username = 'Example';
    }
    switch($cmd){
        case 'displayUser':
            // Insert your user details here. Below is an example of an input
            echo '<input id="username" type="text" placeholder="Update Username" value="$username" />'
        break;
        case 'updateUsername':
            echo 'Username Updated!'
        break;
        //Insert other cases for other commands from Javascript
    }
?>

希望这对你有帮助。干杯!