如何使用AJAX，PHP和MySQL发送个人消息？

Question

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

我有用户列表：

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

当我点击PM按钮，我得到javascipt的sceen：

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按钮添加一个类以便于选择。以后，将一些操作绑定到@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>