javascript - 如何使用 AJAX、PHP 和 MySQL 发送个人消息？

Question

我正在尝试制作一个脚本，将 PM 发送给从 MySQL 中选择的用户。

我有用户列表:

http://i.stack.imgur.com/9fRZV.png

当我点击 PM 按钮时，我得到 Javascipt 屏幕:

http://i.stack.imgur.com/4bJ9A.png

如何使用用户列表中的值自动填充 Javascript 屏幕字段并将值发送到其他 PHP 文件(使用 AJAX)？

用户列表表代码:

        <!-- Table -->
        <table class="table table-condensed">
        <tr class="bg_h">
        <th>Username</th>
        <th>Email</th>
        <th>Rank</th>
        <th>Active?</th>
        <th>Registration date</th>
        <th>IP</th>
        <th>PM</th>
        </tr>

        <?php
        $sql = "SELECT * FROM users ORDER BY user_id ASC";
        $query = $dbh->prepare($sql);
        $query->execute();
        $list = $query->fetchAll();

        foreach ($list as $row) {
        ?>
        <tr class="">
        <td><?php echo $row['user_name']; ?></td>
        <td><?php echo $row['user_email']; ?></td>
        <td>
        <?php
        PHP code of getting user rank.
        ?>
        </td>
        <td>
        <?php
        PHP code to chech is user active.
        ?>
        </td>
        <td>
        <?php echo $row['user_registration_datetime']; ?>
        </td>
        <td>
        <?php echo $row['user_registration_ip']; ?>
        </td>           


        <td>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#send-pm">@PM</button>
        <div class="modal fade" id="send-pm" tabindex="-1" role="dialog" aria-labelledby="send-pm-label" 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="send-pm-label">Send personal message</h4>
        </div>    
        <div class="modal-body">        
        <div class="form-group">
        <label for="name" class="control-label">Receiver name</label>
        <textarea style="height:35px;" name="name" id="name" class="form-control"  ></textarea>
        </div>
        <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <textarea style="height:35px;" name="email" id="email" class="form-control"  ></textarea>
        </div>
        <div class="form-group">
        <label for="message" class="control-label">Message</label>
        <textarea style="height:250px;" name="message" id="message" class="form-control" ></textarea>
        </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="submit" class="btn btn-primary">SEND</button>
        </div>    
        </div>
        </div>
        </div>
        </td>
            </tr>
            <?php
            }
            ?>
        </table>

Answer 1

首先，您不需要为表中的每一行提供模式对话框。将其从 for-each 循环中取出。另外，为每个 @PM 按钮添加一个类以便于选择。然后，将一些操作绑定(bind)到@PM按钮单击事件。这是代码，确保 jquery 已加载。

 foreach ($list as $row) {
        ?>
        <tr class="">
            <td><?php echo $row['user_name']; ?></td>
            <td><?php echo $row['user_email']; ?></td>
            <td>
            <?php
            //PHP code of getting user rank.
            ?>
            </td>
            <td>
            <?php
            //PHP code to chech is user active.
            ?>
            </td>
            <td>
                <?php echo $row['user_registration_datetime']; ?>
            </td>
            <td>
                <?php echo $row['user_registration_ip']; ?>
            </td> 
            <td>
                <button type="button" class="btn btn-primary data-grab-trigger" data-toggle="modal" data-target="#send-pm">@PM</button>        
            </td>
        </tr>
        <?php
        }
        ?>
        </table>
        <div class="modal fade" id="send-pm" tabindex="-1" role="dialog" aria-labelledby="send-pm-label" 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="send-pm-label">Send personal message</h4>
                        </div>    
                        <div class="modal-body">        
                        <div class="form-group">
                        <label for="name" class="control-label">Receiver name</label>
                        <textarea style="height:35px;" name="name" id="name" class="form-control"  ></textarea>
                        </div>
                        <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <textarea style="height:35px;" name="email" id="email" class="form-control"  ></textarea>
                        </div>
                        <div class="form-group">
                        <label for="message" class="control-label">Message</label>
                        <textarea style="height:250px;" name="message" id="message" class="form-control" ></textarea>
                        </div>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" id="submit" class="btn btn-primary">SEND</button>
                    </div>    
                </div>
            </div>
        </div>
        <script>
            $(function (){
                $('.data-grab-trigger').on('click', function (e) {
                    _email = $(this).closest('tr').find('td').eq(0).text(); //get user email from the row where button was clicked
                    _name = $(this).closest('tr').find('td').eq(1).text(); //get user name from the row where button was clicked

                    $("#email").val(_email);
                    $("#name").val(_name);
                });


            });
        </script>