Question

有没有人知道一个好的教程，解释从唱歌页面提交表格？我的html代码中有一些页面视图，其中一个是带有三个字段（名称，电子邮件和消息）的表单，我想要实现的是通过Ajax提交表单数据而不直接使用process.php。 / p>

这是表格：

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

使用Ajax Call从单页Web应用程序提交表单

1 个答案: