我正在处理的网站有一个文档提交表单供用户输入他们的详细信息和他们提交的文档的详细信息，但客户要求在表单中间有一个预览按钮单击时，会显示一个弹出页面（不是新选项卡），显示文档详细信息和作者详情。除了表格末尾的标准提交流程外，这是一项附加功能。
现在我已经关闭了这个网站上的一些教程，但它似乎仍然不适合我。谁能告诉我我缺少什么？
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";
?>
但是，即使出现弹出窗口，也不会拾取任何数据。
提前感谢您的帮助！
答案 0 :(得分：0)
当然它不会选择任何数据，因为你没有传递任何数据（你在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页面的内容。
答案 1 :(得分：0)
您正在调用preview.php两次：一次发送POST数据，另一次是在弹出窗口中显示其内容时（它没有获取任何POST数据）。
最简单的方法是创建一个PHP Session，将值存储在$ _SESSION变量中（在processData.php脚本中），并在调用preview.php时显示它们。类似的东西：
/* This is the processData.php */
session_name('AnySessionName');
session_start();
$_SESSION = $_POST;
然后使用preview.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);
});
答案 2 :(得分：0)
AJAX可能在这里有点过分。您需要做的就是从DOM元素中获取值，将它们插入到隐藏的DIV中，并将隐藏的DIV显示为例如灯箱。
您可以使用jQueryUI's .dialog()方法执行此操作，而根本不涉及AJAX。
请注意，与jQuery一样，在使用代码之前必须引用/加载jQueryUI（及其样式表）。
如果您需要以某种方式处理数据（例如，获取用户提供的数据并在MySQL中查找某些内容然后返回不同的数据），AJAX将非常有用。由于您似乎只使用了用户自己提供的数据，因此您只需使用javascript / jQuery
即可<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例程中的调用方式。