使用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页面。创建一个新文件并将代码粘贴到该文件中。它会更干净。