如何将变量从隐藏字段发送到远程 PHP 文件并在 Bootstrap 模式中显示脚本的结果而不使用 jQuery 刷新？答案

【问题标题】：How to send variables from hidden fields to a remote PHP file and display the result of the script in a Bootstrap modal without refresh using jQuery?如何将变量从隐藏字段发送到远程 PHP 文件并在 Bootstrap 模式中显示脚本的结果而不使用 jQuery 刷新？
【发布时间】：2015-02-03 11:30:54
【问题描述】：

我在动态生成的表格中有以下表格：

文件索引.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 上的脚本：

文件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 输出的模态框：

<table>
...
</table>

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

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

但现在我想做同样的事情，但不需要重新加载页面，即使用 jQuery。

我做了一些研究，并在 StackOverflow (How to display dynamical content from a remote file in bootstrap modal using php?) 中用另一种方法提出了一个问题，以获取有关它的更多信息。有了这些有价值的信息，我做了以下事情：

    <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中的问题。我将不胜感激任何帮助！提前谢谢你。

== 编辑 ==

这里是基于cmets的index.php代码

<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

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

但不幸的是，什么也没发生。 :-\

【问题讨论】：

在 remote.php 中禁用标头位置。比使用萤火虫或铬或其他检查 $.post 是否返回的东西。

标签： javascript php jquery ajax twitter-bootstrap

【解决方案1】：

这里有一些提示可以帮助您解决这个问题：

模态标记（HTML）属于主页index.php
如果您希望remote.php 返回多个值，请返回JSON
监听表单的submit 事件总是比监听click 事件更好。
一定要包含 jQuery 和 Bootstrap (js & css)
奖励：remote.php 正在执行的处理（如果仅此而已）实际上可以在客户端使用 JavaScript 执行，这意味着您无需提交表单，你不需要remote.php。

你的 JavaScript 应该是：

$(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

【讨论】：

【解决方案2】：

试试这个，

$(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', { // dont forget to change the remote url there
        name: name,
        band: band,
        indx: indx,
    }, function( data ) {
        $("#rock-modal").html(data); // data is response from your remote php srcipt
                                     // so set this data to div with id "rock-modal"
        $("#rock-modal").modal('show'); // and show the div with id rock-modal
    });
  });
});

【讨论】：

你好@Pankaj，谢谢你的回答。我根据您的评论编辑了问题并插入了文件的完整代码，但不幸的是没有任何反应。
只检查firebug - 控制台是否有任何JS错误？？
完全没有错误！屏幕很暗，但没有模态窗口。
尝试我编辑的答案...以及检查萤火虫控制台，右键单击浏览器并选择“检查元素”选项，然后将打开一个小窗口并转到控制台选项以检查任何 js 错误..