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

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

转载作者：搜寻专家更新时间：2023-10-31 21:08:38

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

文件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 上的脚本:

文件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?) 中用另一种方法提出了问题，以获取更多相关信息。有了这些有值(value)的信息，我做了以下事情:

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

== 编辑 ==

这里是根据评论的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;

但不幸的是什么都没有发生。 :-\

最佳答案

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

模态标记 (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

关于javascript - 如何将变量从隐藏字段发送到远程 PHP 文件并在 Bootstrap 模式中显示脚本的结果而不使用 jQuery 刷新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27313460/

文章推荐： php - Amazon api 没有从库存中删除我的产品

文章推荐： php - 循环中的 Codeigniter 模板(if/else if)

文章推荐： javascript - 如何验证请求是否来自特定的 Web 应用程序

文章推荐： javascript - 本地化:Php 和 Javascript

url - 文件 :/, 文件 ://, 文件:///和有什么区别
今天我在一个 Java 应用程序中看到了几种不同的加载文件的方法。文件:/ 文件:// 文件:/// 这三个 URL 开头有什么区别？使用它们的首选方式是什么？非常感谢斯特凡最佳答案 file
EDI X12 文件 - 文件
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
c# - 从 javascript 文件(.js 文件)调用 C# 函数(.cs 文件)
我有一个 javascript 文件，并且在该方法中有一个“测试”方法，我喜欢调用 C# 函数。 c# 函数与 javascript 文件不在同一文件中。它位于 .cs 文件中。那么我该如何管理 j
java - 文件.canWrite();文件.canRead();文件.canExceute();尽管我的文件/目录没有访问权限，但始终返回 true
需要检查我使用的文件/目录的权限 //filePath = path of file/directory access denied by user ( in windows ) File fil
intellij-idea - 将外部 java 文件(*.java 文件，而不是 jar 文件)添加到 Intellij 中的项目
我在一个目录中有很多 java 文件，我想在我的 Intellij 项目中使用它。但是我不想每次开始一个新项目时都将 java 文件复制到我的项目中。我知道我可以在 Visual Studio 和
linux - 我不小心复制了一个 bash 文件，并将其替换为 Linux Mint 中的 .bashrc 文件。我该如何检索 .bashrc 文件？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
php - 在 Twig 文件 B 中渲染 Twig 文件 A 但仅在查看 Twig 文件 C 时？
我有 3 个组件的 Twig 文件: 文件 1: {# content-here #} 文件 2: {{ title-here }} {# content-here #}
linux - 如何在 Linux 中将 .c 文件转换为 .so 文件？我有 .c 文件。并需要 Linux 命令将其转换为 .so 文件
我得到了 mod_ldap.c 和 mod_authnz_ldap.c 文件。我需要使用 Linux 命令的 mod_ldap.so 和 mod_authnz_ldap.so 文件。最佳答案从 c
javascript - 文件 .htc 文件 - 我需要网络服务器吗？
我想使用PIE在我的项目中使用 IE7。但是我不明白的是，我只能在网络服务器上使用 .htc 文件吗？我可以在没有网络服务器的情况下通过浏览器加载的本地页面中使用它吗？我在 PIE 的文档中看到
Java docker 文件。构建并测试还是只运行 jar 文件？
我在 CI 管道中考虑这一点，我应该首先构建和测试我的应用程序，结果应该是一个 docker 镜像。我想知道使用构建环境在构建服务器上构建然后运行测试是否更常见。也许为此使用构建脚本。最后只需将 j
C++ 文件 I/O 我无法读取 .dat 文件
using namespace std; struct WebSites { string siteName; int rank; string getSiteName() {
c++ - 尽管链接了库文件夹中的 .so 文件，但缺少 .h 文件
我是 Linux 新手，目前正在尝试使用 ginkgo USB-CAN 接口(interface) 的 API 编程功能。为了使用 C++ 对 API 进行编程，他们提供了库文件，其中包含三个带有 .
C 文件 I/O，使用 TXT 文件
我刚学C语言，在实现一个程序时遇到了问题将 test.txt 文件作为程序的输入。 test.txt 文件的内容是: 1 30 30 40 50 60 2 40 30 50 60 60 3 30 20
networking - 如何连接两个 tcpdump 文件(pcap 文件)
如何连接两个tcpdump文件，使一个流量在文件中出现一个接一个？具体来说，我想“乘以”一个 tcpdump 文件，这样所有的 session 将一个接一个地按顺序重复几次。最佳答案 mergeca
video - 修复损坏的 .MP4 文件。这可能是一个 3gp 文件
我有一个名为 input.MP4 的文件，它已损坏。它来自闭路电视摄像机。我什么都试过了，ffmpeg , VLC 转换，没有运气。但是，我使用了 mediainfo和 exiftool并提取以下信息
android - 如何提取 ISO 文件，然后将其重新打包成可用的 ISO 文件？
我想做什么？我想提取 ISO 文件并编辑其中的文件，然后将其重新打包回 ISO 文件。 (正如你已经读过的) 我为什么要这样做？我想开始修改 PSP ISO，为此我必须使用游戏资源、 Assets
compression - 给定一个解压缩的 gzip 文件，有没有办法重新创建准确的原始 gzip 文件？
给定一个 gzip 文件 Z，如果我将其解压缩为 Z'，有什么办法可以重新压缩它以恢复完全相同的 gzip 文件 Z？在粗略阅读了 DEFLATE 格式后，我猜不会，因为任何给定的文件都可能在 DEF
sql-server - 带附件的数据库电子邮件(excel 文件/pdf 文件)？
我必须从数据库向我的邮件 ID 发送一封带有附件的邮件。 EXEC msdb.dbo.sp_send_dbmail @profile_name = 'Adventure Works Admin
audio - 如果我有 CUE 文件，如何拆分 M4B 文件？
我有一个大的 M4B 文件和一个 CUE 文件。我想将其拆分为多个 M4B 文件，或将其拆分为多个 MP3 文件(以前首选)。我想在命令行中执行此操作(OS X，但如果需要可以使用 Linux)，而
ios - 是否有编译器标志以便链接器警告我这个？ .h 文件，没有 .m 文件
快速提问。我有一个没有实现文件的类的项目。然后在 AppDelegate 我有: #import "AppDelegate.h" #import "SomeClass.h" @interface A

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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