I am working on a project in which a client enters his name in the HTML form and clicks send and then the name is sent through the AJAX post function and received at the server side with KOA.js and then using nodemailer, is emailed to a predefined email-id.I am having a problem that all the pieces of code are not coordinating with each other (some pieces of code are malfunctioning or not working too) and so the system just doesn't work. I am posting all the code below, that I have used to make this program. I would really appreciate some help on this matter.
Thanks
The HTML code:-
1.This is the code for the textbox, to take the name of the client as an input.
<input type="text" class="form-control" ng-model="name" id="supporter" placeholder="Please Type In your Name Here.">
2.This is the code for the button,that triggers the AJAX function to send the input name to the server.
<div class="btn">
<button type="button" class="btn btn-lg btn-success" style="background-color: yellow;font-size:150%;" onclick="send()">Send the E-mail</button>
</div>
3.This is the HTML code for the display of the status of the submit action, when the send button is clicked ( more details of this function does can be easily found in the AJAX piece of code ).
<div id="myDiv"></div>
<div id="myGraphics"></div>
4.The AJAX code:-
1.This AJAX code not just sends the clients name to the server but also controls a bootstrap progress bar that shows up at the client side, showing him if his data is sent or not (it shows the status of the submit action).
AJAX Code:-
function send()
{
var xmlhttp;
var name;
name = document.getElementById("supporter").value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==0 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML="request not initialized";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
<span class="sr-only">20% Complete (danger)</span>
</div>
</div>");
}
else if (xmlhttp.readyState==1 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML="server connection established";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
<span class="sr-only">20% Complete (danger)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
</div>");
}
else if (xmlhttp.readyState==2 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML="request received";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
<span class="sr-only">20% Complete (danger)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (info)</span>
</div>
</div>");
}
else if (xmlhttp.readyState==3 && xmlhttp.status==200)
{
document.getElementById("myText").innerHTML="processing request";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
<span class="sr-only">20% Complete (danger)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (info)</span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (primary)</span>
</div>
</div>");
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML="request finished";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
<span class="sr-only">20% Complete (danger)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (info)</span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (primary)</span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (success)</span>
</div>
</div>");
}
else if (xmlhttp.status==404)
{
document.getElementById("myDiv").innerHTML="Page not found";
document.getElementById("myGraphics").write("<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 100%">
<span class="sr-only">100% Complete (danger)</span>
</div>
</div>");
}
}
xmlhttp.open("POST","#*",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(name);
}
3.The KOA.js code for accepting the POST data and sending it to the predefined email-id via Nodemailer.
var app = require('koa')(),
router = require('koa-router'),
koaBody = require('koa-body')();
app.use(router());
app.post('#*', koaBody,
function *getit() {
console.log(this.request.body);
// => POST body
this.body = JSON.stringify(this.request.body);
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: 'sender@gmail.com',
pass: 'password'
}
});
transporter.sendMail({
from: 'sender@address',
to: 'receiver@address',
subject: '#'
text: "#" + testContext + " #- " + testContext + "#="
});
}
);
app.listen(3131)
console.log('curl -i http://localhost:3131/ -d "name=test"');
The data mentioned in the 'from' ,'to' , 'user' and 'pass' parameters are not mentioned here correctly as it is already in the actual code (there it is present correctly and completely).
The different hashes(like '#*' and '#-' etc) are used to denote different types of text data in the code.
Aucun commentaire:
Enregistrer un commentaire