使用 Ajax 调用从单页 webapp 提交表单

Question

有谁知道一个很好的教程，其中解释了从 sing 页面提交表单？我的 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 页面。创建一个新文件并将代码粘贴到该文件中。会更干净。