我正在工作的网站有一个文档提交表单，用户可以输入他们的详细信息和他们正在提交的文档的详细信息，但客户要求在表单的中间有一个预览按钮，当点击该按钮时，会有一个弹出页面（而不是新的选项卡），显示文档详细信息&作者详细信息。这是除了表单末尾的标准提交过程之外的一个附加功能
现在我已经在这个网站上停止了一些教程，但它似乎仍然对我不起作用。有人能告诉我遗漏了什么吗？
html（摘要）
<form id="document-submit-form" method="post" action="index.php" enctype="multipart/form-data">
<input type="text" name="documentTitle" class="longInputBox" id="documentTitleInput" value="" required />
<input type="text" name="authorsNameOne" id="authorsNameOneInput" value="" class="authorsNameInput" required />
</form>
jQuery（总结-在验证结束时）
$("#documentPreviewSubmit").click(function(event) {
event.preventDefault();
var $title = escape($('#documentTitleInput').val());
var $author = escape($('#authorsNameOne').val());
$.ajax({
type: "POST",
url: "preview.php",
data: { documentTitle: $title, authorsNameOne: $author }
}).done(function( msg ) {
var url = "preview.php";
var windowName = "popUp";
var windowSize = "width=495,height=680";
window.open(url, windowName, windowSize);
});
});
preview.php（摘要）
<?php
echo '<h1>'.$_POST['documentTitle'].'</h1>'."'n";
echo '<h2>'.$_POST['authorsNameOne'].'</h2>'."'n";
?>
但是，即使弹出窗口出现，也不会拾取任何数据。
提前感谢您的帮助！
您调用preview.php两次：一次是发送POST数据，另一次是在弹出窗口中显示其内容（它没有获得任何POST数据）。
最简单的方法是创建一个PHP会话，将值存储在$_Session变量中（在processData.PHP脚本中），并在调用preview.PHP时显示它们
/* This is the processData.php */
session_name('AnySessionName');
session_start();
$_SESSION = $_POST;
然后使用预览.php文件，如：
/* This is the preview.php */
session_name('AnySessionName');
session_start();
// Here you can show your preview page, using $_SESSION['documentTitle'] instead of $_POST['documentTitle']
// After using this, destroy the session.
unset($_SESSION['documentTitle']); // Repeat for any parameter used
session_destroy();
这样，你的脚本会像：
$("#documentPreviewSubmit").click(function(event) {
event.preventDefault();
var $title = escape($('#documentTitleInput').val());
var $author = escape($('#authorsNameOne').val());
$.ajax({
type: "POST",
url: "processData.php",
data: { documentTitle: $title, authorsNameOne: $author }
}).done(function( msg ) {
var url = "preview.php";
var windowName = "popUp";
var windowSize = "width=495,height=680";
window.open(url, windowName, windowSize);
});
当然，它不会拾取任何数据，因为您没有传递任何数据（您在ajax调用中这样做，这是一个单独的请求，对您的下一个window.open调用一无所知）
在您的情况下，您应该传递$_GET中的变量：
var url = "preview.php?title=" + $title + '&author=' + $author;
var windowName = "popUp";
var windowSize = "width=495,height=680";
window.open(url, windowName, windowSize);
然后在preview.php中，你会看到它们，比如：
$title = isset($_GET['title']) ? $_GET['title'] : null;
$author = isset($_GET['author']) ? $_GET['author'] : null;
接下来是备选方案
然而，你可以做一些类似的事情：
$.ajax({
type: "POST",
url: "preview.php",
data: { documentTitle: $title, authorsNameOne: $author }
}).done(function( msg ) {
$('#someHiddenDiv').html(msg).show();
});
其中#someHiddenDiv是一个绝对定位的div，您可以在其中吐出已处理ajax调用的preview.php页面的内容。
AJAX在这里可能有些过头了。您所需要做的就是从DOM元素中获取值，将它们插入到隐藏的DIV中，并将隐藏的DIV显示为（例如）灯箱。
您可以使用jQueryUI's .dialog()方法来做到这一点，而根本不涉及AJAX。
请注意，与jQuery一样，在使用代码之前，必须引用/加载jQueryUI（及其样式表）
AJAX只有在您需要以某种方式处理数据时才有用（例如，获取用户提供的数据，在MySQL中查找一些内容，然后返回不同的数据）。由于您似乎只使用用户自己提供的数据，因此您可以使用javascript/jQuery来完成此操作
jsFiddle此处
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style>
ul{list-style-type: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$( "#preview" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
title: 'Document Preview:',
buttons: {
'Do Something': function() {
// code to do something upon dlg close
$(this).dialog('close');
},
Close: function() {
$(this).dialog('close');
}
}
});
$('#btn_pv').click(function() {
var dt = $('#documentTitleInput').val();
var an = $('#authorsNameOneInput').val();
var pv = '';
pv += '<h2>' +dt+ '</h2>';
pv += '<h2>' +an+ '</h2>';
$("#preview").html(pv);
$("#preview").dialog('open');
});
}); //END $(document).ready()
</script>
</head>
<body>
<form id="document-submit-form" method="post" action="index.php" enctype="multipart/form-data">
<ul>
<li>
Document Title:<br />
<input type="text" name="documentTitle" class="longInputBox" id="documentTitleInput" value="" required />
</li>
<li>
Author's Name:<br />
<input type="text" name="authorsNameOne" id="authorsNameOneInput" value="" class="authorsNameInput" required />
</li>
</ul>
</form>
<br />
<input type="button" id="btn_pv" value="Preview" />
<div id="preview"></div>
</body>
</html>
然而，如果你想使用AJAX来实现这一点，你可以修改你的按钮点击事件，如下所示：
$('#btn_pv').click(function() {
var dt = $('#documentTitleInput').val();
var an = $('#authorsNameOneInput').val();
$.ajax({
type: "POST",
url: "your_php_file.php",
data: 'docTitle=' +dt+ '&aName=' +an,
success: function(pv) {
$("#preview").html(pv);
$( "#preview" ).dialog({
autoOpen: true,
height: 300,
width: 350,
modal: true,
title: 'Document Preview:',
buttons: {
'Do Something': function() {
// code to do something upon dlg close
$(this).dialog('close');
},
Close: function() {
$(this).dialog('close');
}
}
}); //end .dialog()
} //END success fn
}); //END $.ajax
//var pv = '';
//pv += '<h2>' +dt+ '</h2>';
//pv += '<h2>' +an+ '</h2>';
$("#preview").html(pv);
$("#preview").dialog('open');
});
PHP文件your_php_file.php（或者你想怎么称呼它）应该是：
<?php
$dtit = $_POST['docTitle'];
$anam = $_POST['aName'];
$r = '<h2>' .$dtit. '</h2>';
$r .='<h2>' .$anam. '</h2>';
echo $r;
如果您更改了PHP文件的名称（我希望您这样做），还记得更改上面AJAX例程中对它的调用方式。