我在动态生成的表格中有以下表格:
文件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">×</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">×</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');
});
});
关于javascript - 如何将变量从隐藏字段发送到远程 PHP 文件并在 Bootstrap 模式中显示脚本的结果而不使用 jQuery 刷新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27313460/