我有一个表是产生dinamically里面的格式如下：

I have following form inside a table that is generate dinamically:

index.php文件

File index.php

session_start();

...

<table>
    <tr>
        <td>Name</td>
        <td>Band</td>
        <td>Indx</td>
        <td>Send</td>
    </tr>
    <tr>
        <td>Bruce</td>
        <td>Iron Maiden</td>
        <td>95</td>
        <td>
            <form action="remote.php" class="rock" method="POST">
                <input class="name" name="name" type="hidden" value="Bruce">
                <input class="band" name="band" type="hidden" value="Iron Maiden">
                <input class="indx" name="indx" type="hidden" value="95">
                <button class ="send" type="submit">SEND<button>
            </form>
        </td>
    </tr>
    <tr>
        <td>James</td>
        <td>Metallica</td>
        <td>90</td>
        <td>
            <form action="remote.php" class="rock" method="POST">
                <input class="name" name="name" type="hidden" value="James">
                <input class="band" name="band" type="hidden" value="Metallica">
                <input class="inx" name="indx" type="hidden" value="90">
                <button class ="send" type="submit">SEND<button>
            </form>
        </td>
    </tr>

当我点击发送发送信息到脚本的remote.php：

When I click on send it sends the info to the script on remote.php:

文件remote.php

File remote.php

<?php

    session_start();

    $name = $_POST['name'];
    $band = $_POST['band'];
    $indx = $_POST['indx'];

    $up = $indx * 2;

    $output = '
        <div id="rock-modal" class="modal fade in" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">
                            <i class="fa fa-files-o"></i>
                            Rock Modal
                        </h4>
                    </div>
                    <div class="modal-body">
                        The band '.$band.' has an up index of '.$up.'!';
                    </div><!-- /modal-body -->
                </div><!-- /modal-content -->
            </div><!-- /modal-dialog modal-lg -->
        </div><!-- /modal fade in-->';

    $_SESSION['output'] = $output;

    header('Location: index.php');

然后index.php文件是新装入的，但现在它会打开一个模式对话框与remote.php输出：

Then index.php is new loaded, but now it opens a modal box with the output from remote.php:

<table>
...
</table>

if(isset($output){
    echo $output;
}

<script type="text/javascript">
    // Compare Modal
    $('#rock-modal').modal('show');
</script>

但现在我想这样做，但没有页面重载，即使用jQuery。

But now I would like to do the same, but without page reload, i.e. with jQuery.

我做了一些研究，并要求在这里的另一种方法中的StackOverflow的问题（How使用PHP自举模式来显示从远程文件动态内容？），以获得更多的相关信息。有了这个旅游居停的信息，我做了以下内容：

I did some research and asked a question with another approach here in StackOverflow (How to display dynamical content from a remote file in bootstrap modal using php?) to get more information about it. With this valueable info I did the following:

    <tr>
        <td>Bruce</td>
        <td>Iron Maiden</td>
        <td>95</td>
        <td>
            <form action="remote.php" class="rock" method="POST">
                <input class="name" name="name" type="hidden" value="James">
                <input class="band" name="band" type="hidden" value="Metallica">
                <input class="inx" name="indx" type="hidden" value="90">
            </form>

            <a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
        </td>
    </tr>

$(function() {
    $('.rock-send').on('click', function() {
        var data = $(this).closest('tr').find('>td:lt(3)'),
        modal = $(this).data('modal');
        $.post( $(this).data('href'), {
            name: data.name.text(),
            band: data.band.text(),
            indx: data.indx.text(),
        }, function( data ) {
            $(modal).modal('show');
        });
    });
});

但不知何故，它不工作。我不知道如果remote.php可以读取发送的变量，并让他们回来。我该如何管理呢？ 这也可能是在JavaScript中的一个问题。我想AP preciate任何帮助！ 谢谢你在前进。

But somehow it's not working. I'm not sure if the remote.php can read the variables that are sent and give them back. How can I manage it? It's probably a problem in the javascript. I would appreciate any help! Thank you in advance.

==编辑==

下面的index.php的基础上，评论code。

Here the code of index.php based on the comments.

<html>
<head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <table>
        <tr>
            <td>Bruce</td>
            <td>Iron Maiden</td>
            <td>95</td>
            <td>
                <form action="remote.php" class="rock" method="POST">
                    <input class="name" name="name" type="hidden" value="James">
                    <input class="band" name="band" type="hidden" value="Metallica">
                    <input class="inx" name="indx" type="hidden" value="90">
                </form>
                <a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
            </td>
        </tr>
        <tr>
            <td>James</td>
            <td>Metallica</td>
            <td>90</td>
            <td>
                <form action="remote.php" class="rock" method="POST">
                    <input class="name" name="name" type="hidden" value="James">
                    <input class="band" name="band" type="hidden" value="Metallica">
                    <input class="inx" name="indx" type="hidden" value="90">
                </form>
                <a class="btn btn-info rock-send" data-modal="#rock-modal" data-href="remote.php">OK</a>
            </td>
        </tr>
    </table>

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <script>
        $(function() {
            $('.rock-send').on('click', function() {

                var name = $("input[name='name']").val();
                var band = $("input[name='band']").val();
                var indx = $("input[name='indx']").val();
                $.post('remote.php', {
                    name: name,
                    band: band,
                    indx: indx,
                }, function( data ) {
                    $("#rock-modal").html(data);
                    $("#rock-modal").modal('show');
                });
            });
        });
    </script>
</body>
</html>

和这里完全remote.php

and here the complete remote.php

<?php
    $name = $_POST['name'];
    $band = $_POST['band'];
    $indx = $_POST['indx'];
    $up = $indx * 2;

    $output = '
        <div id="rock-modal" class="modal fade in" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">
                            <i class="fa fa-files-o"></i>
                            Rock Modal
                        </h4>
                    </div>
                    <div class="modal-body">
                        The band '.$band.' has an up index of '.$up.'!!!
                    </div><!-- /modal-body -->
                </div><!-- /modal-content -->
            </div><!-- /modal-dialog modal-lg -->
        </div><!-- /modal fade in-->';
    echo $output;

不过，可惜的是没有发生。 ： - \

But unfortunatelly nothing occurs. :-\

推荐答案

下面是一些指针，以帮助您解决这个问题：

Here are some pointers to help you solve this:

模态标记（HTML）所属的主要页面的index.php 如果您想 remote.php 返回多个值，返回 JSON 它总是更好听的形式的提交事件，而不是一个点击事件。 一定要包括jQuery的，和Bootstrap（JS＆安培; CSS） BONUS ：正在执行的处理 remote.php （如果这一切都在做），实际上可以使用JavaScript来执行在客户端，这意味着你不需要提交表单，你不需要 remote.php 。的 The modal markup (HTML) belongs in the main page index.php If you'd like remote.php to return more than one value, return JSON It's always better to listen for a form's submit event instead of a click event. Be sure to include jQuery, and Bootstrap (js & css) BONUS: The processing being performed by the remote.php (if that's all it's doing) can actually be performed using JavaScript on the client-side, meaning you do not need to submit the form, and you don't need remote.php.

您的JavaScript则应是：

Your JavaScript should then be:

$(document).ready(function(){
    $('.rock').on('submit', function( e ){
        e.preventDefault();
        var band = $(this).find('input[name=band]').val(),
            indx = +$(this).find('input[name=indx]').val(),
            up = indx * 2;
        $('#rock-modal').find('.modal-body')
        .text( 'The band ' + band + ' has an up index of ' + up + '!!!' ).end()
        .modal('show');
     });
});

DEMO