本文介绍了如何从隐藏字段变量发送到远程PHP文件,并使用jQuery无刷新的botstrap模式显示脚本的结果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个表是产生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的问题(<一href="http://stackoverflow.com/questions/27298630/how-to-display-dynamical-content-from-a-remote-file-in-bootstrap-modal-using-php/27299416?noredirect=1#comment43075585_27299416">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

这篇关于如何从隐藏字段变量发送到远程PHP文件,并使用jQuery无刷新的botstrap模式显示脚本的结果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:32
查看更多