使用Ajax Call从单页Webapp提交表单 [英] Submiting a form from a single page webapp using Ajax Call
问题描述
有人知道一个好的教程，其中解释了从唱歌页面提交表单的问题吗?我的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>
请让我知道你们中是否有人已经实现过类似的功能.谢谢.
您可以提交到同一PHP页面.您只需要一个if语句即可将生成页面的代码与提交表单的代码分开.话虽如此，您可能应该只创建第二个PHP脚本来处理表单提交.如果您想使用if语句实现它，我将在您的GET/POST请求中添加一条信息，例如:
'formSubmission='+true
好的，有关更多详细信息，请参见此教程，它遍历了基本.在您的情况下，请尝试执行此操作(注意:我尚未对此进行任何测试).另外，向每个元素添加一个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页面.创建一个新文件，并将代码粘贴到该文件中.会更干净的.
Does anyone know about a good tutorial where submiting a form from a sing page is explained? I have a few page views in my html code and one of them is a form with three fields (Name, Email and Message) what I am trying to achieve is to submit the form data via Ajax without using a process.php directly.
This is the Form:
<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>
This is the confirmation page after message has been sent:
<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>
Please, let me know if any of you have already implemented something like this. Thank you.
You could submit to the same PHP page. You just need an if statement to separate the code that generates the page from the code that submits your form. That being said, you should probably just create a second PHP script to handle the form submission. If you wanted to implement it using the if statement, I would add a piece of information to your GET/POST request which would be something like:
'formSubmission='+true
Okay, for the more details, look at this tutorial, it goes over the basics. In your case, try this (NOTE: I haven't tested any of this). Also, add an ID to each of the elements (I assumed they would be the same as your current name attributes and that the textarea would have the ID message).
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
}
}
}
Now here's the 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
}
Just a thought, don't submit to the same PHP page that you're currently on. Create a new file and paste the code into that. It'll be cleaner.
这篇关于使用Ajax Call从单页Webapp提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
