php - 通过 ajax 将 $_POST 值传输到 jQuery 启动的弹出窗口不起作用

Question

我正在处理的网站有一个文档提交表单，供用户输入他们的详细信息和他们提交的文档的详细信息，但是客户要求在表单中间有一个预览按钮，单击该按钮，有一个显示文档详细信息和作者详细信息的弹出页面（不是新选项卡）。这是除了表单末尾的标准提交过程之外的附加功能。

现在我已经关闭了这个网站上的一些教程，但它似乎仍然不适合我。谁能告诉我我错过了什么？

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";
?>

然而，即使弹出窗口出现，也没有数据被拾取。

在此先感谢您的帮助！

score 0 · Accepted Answer

当然，它不会选择任何数据，因为您没有传递任何数据（您在 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，您可以在其中吐出preview.php已处理 ajax 调用的页面内容。

score 0 · Accepted Answer

您调用了 preview.php 两次：一次是在发送 POST 数据时，另一次是在您在弹出窗口中显示其内容时（它没有获取任何 POST 数据）。

最简单的方法是创建一个 PHP 会话，将值存储在 $_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);
   });

score 0 · Accepted Answer

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 例程中调用它的方式。

php - 通过 ajax 将 $_POST 值传输到 jQuery 启动的弹出窗口不起作用

3 回答 3

Related

Reference