使用Ajax調用從單個頁面Web應用程序提交表單

Question

有誰知道從單獨頁面提交表單的好教程？我在我的html代碼中有幾個頁面視圖，其中一個是帶有三個字段（名稱，電子郵件和消息）的表單，我試圖實現的是通過Ajax提交表單數據而不直接使用process.php。

這是形式：

<section class="hidden" id="view-forms"> 
      <header> 
       <button class="left arrow" data-vin="view-home" data-sd="sr"> 
        <div class="label">All Contacts</div> 
       </button> 
       <h1>Message</h1> 
       <button class="right bold green" data-vin="view-done" data-sd="sl"> 
        <div class="label">Send</div> 
       </button> 
      </header> 
      <div class="scrollMask"></div> 
      <div class="scrollWrap"> 
       <div class="scroll"> 
       <div class="content"> 
        <input placeholder="Name" type="text" /> 
        <input placeholder="Email" type="email" /> 
        <textarea placeholder="Your Message" rows="5"></textarea> 
       </div> 
      </div> 
      </div> 
     </section> 

這是確認頁面已發送消息後：

<section class="hidden" id="view-done"> 
      <header> 
       <h1>That's it!</h1> 
       <button class="right bold" data-vin="view-home" data-sd="popout"> 
        <div class="label">Done</div> 
       </button> 
      </header> 
      <div class="scrollMask"></div> 
      <div class="scrollWrap"> 
       <div class="scroll"> 
       <div class="content"> 
        <h2>Message sent!</h2> 
       </div> 
      </div> 
      </div> 
     </section> 

請讓我知道如果你們已經實現了這樣的事情。謝謝。

Answer 1

您可以提交到相同的PHP頁面。您只需要一個if語句將生成頁面的代碼與提交表單的代碼分開。話雖如此，你應該創建第二個PHP腳本來處理表單提交。如果你想使用if語句來實現它，我將一條信息添加到這將是喜歡你的GET/POST請求：

'formSubmission='+true 

好了，對於更多的細節，看這tutorial，它基本知識。在你的情況下，試試這個（注意：我還沒有測試過任何這個）。另外，爲每個元素添加一個ID（我假設它們將與您當前的名稱屬性相同，並且textarea將具有ID消息）。

function()submitForm(){ 
    var name = document.getElementById('name').value; 
    var email = document.getElementById('email').value; 
    var message = document.getElementById('message').value; 
    var requestData = 'name='+name+'&email='+email+'&message='+message+'&formSubmission='+true; 
    //I'm assuming that you're using a POST request (this depends on the length of the message 
    var AJAXObj = new XMLHttpRequest(); 
    //don't forget to replace currentURL.php with the name of the page that will handle the submission 
    AJAXObj.open('POST', 'currentURL.php', true); 
    AJAXObj.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
    AJAXObj.send(requestData); 
    AJAXObj.onreadystatechange = function(){ 
     var AJAXObj = event.target; 
     if(AJAXObj.readyState == 4 && AJAXObj.status == 200){ 
      var responseText = AJAXObj.responseText; 
      //things that you might want to do with your responseText 
     } 
    } 
} 

現在，這裏的PHP：

if(isset($_POST['formSubmission'])){ 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    //code that handles the form data that has now been passed to PHP 
} 

只是一個想法，不服從你目前所在的同一個PHP頁面。創建一個新文件並將代碼粘貼到該文件中。它會更乾淨。