轉移$ _ POST值的jQuery通過Ajax工作不

網站我的工作有一個文件提交表格，供用戶在細節上輸入和文檔的詳細信息，他們要提交發起的彈出窗口，但客戶端請求在表格的中間，有一個顯示文檔的詳細&筆者細節預覽按鈕，單擊時，有一個彈出網頁（不是一個新的選項卡）。除了表單末尾的標準提交過程之外，這是一項附加功能。

現在，我已經關閉了這個網站一些教程，但它仍然似乎並沒有對我的工作。任何人都可以請告訴我失蹤了什麼？

HTML（總結）

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

然而，即使彈出窗口出現，沒有數據被拾取。

在此先感謝您的幫助！

來源

2013-06-27 gavmcgz

從你的問題描述來看，它聽起來並不像你真的需要AJAX--儘管你可以使用它。當你需要服務器對用戶提供的數據進行一些操作時（比如在MySQL中查找某些內容），AJAX就被使用 - 而你可能不需要這樣做。查看下面的解決方案只使用JavaScript/jQuery。 – gibberish

要調用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); 
    });

來源

2013-06-27 22:29:44

爲什麼他會在處理表單時使用會話？對我而言，這是沒有意義的...... – Twisted1919

因爲彈出窗口不是窗體的一部分，所以它是另一個請求。他可以按照你的建議使用GET，但是它的長度有限制。不過，也許這對他的目的有用。 –

非常棒的解決方案，非常感謝！ – gavmcgz

當然它不選擇任何數據，因爲你不傳遞任何（你在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是你吐的是已經處理Ajax調用你的preview.php頁面的內容絕對定位的div。

來源

2013-06-27 22:28:20 Twisted1919

感謝您的建議，它當然有用，並且您確定了爲什麼我的原始信息沒有出現時，我第二次在preview.php窗口中打開窗口，這是一個很好的教訓，但@AlejandroIván提到爲什麼這個特定的解決方案不太適合我的項目，我需要通過的實際數量值是不少的（我只是總結了我的代碼，並提到了需要傳遞的兩個值），我不能冒險裁減在一個很長的網址。儘管感謝您的幫助！ – gavmcgz

AJAX可能是矯枉過正這裏。您只需從DOM元素中取值，將其插入到隱藏的DIV中，並將隱藏的DIV顯示爲（例如）Lightbox。

您可以使用jQueryUI's .dialog()方法來執行此操作，而不涉及AJAX。

請注意，像jQuery一樣，在使用代碼之前，必須引用/加載jQueryUI（及其樣式表）。

如果您需要以某種方式處理數據（例如，獲取用戶提供的數據並在MySQL中查找並返回不同的數據），那麼AJAX將非常有用。既然你似乎是隻使用用戶提供自己的數據，你可以做到這一點與JavaScript/jQuery的

jsFiddle here

<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程序。

來源

2013-06-28 16:42:16 gibberish

這是一個很好的建議，我很享受jQuery UI的玩法，這是我以前從未聽說過的，但我認爲我選擇的解決方案對未來這個特定項目的發展會更好，特別是最終轉向新生成的頁面變成pdf，這個頁面大多數依賴於打開的單獨頁面/窗口，而不是顯示隱藏的div。儘管乾杯！ – gavmcgz

轉移$ _ POST值的jQuery通過Ajax工作不

回答

相關問題