Develop Reference

How to submit form values in JSON format to a servlet using AJAX?

I am trying to send login data in JSON format to a servlet using AJAX, but for some reason the servlet is getting null values. My servlet works fine when I send the data without AJAX, but when I use it it seems that my script is not getting any values.
Login form:
<form>
<input class="input-container" type="text" placeholder="Enter Email"
name="email" required><br>
<input class="input-container" type="password" placeholder="Enter Password"
name="paswd" required><br>
<input class="login-button" type="button" value="Log in"
onclick="loginAjax(this.form)">
</form>
AJAX:
function loginAjax(form) {
var user = new Object();
user.email = form.email.value;
user.paswd = form.paswd.value;
var jsonUser = JSON.stringify(user);
console.log(user.email);
console.log(user.paswd);
console.log(jsonUser);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
//Empty form fields
form.email.value = "";
form.paswd.value = "";
}
};
xmlhttp.open("POST", "./login", true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send(jsonUser);
}
Servlet:
# WebServlet(name = "login", urlPatterns = { "/login" })
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.sendRedirect("index.html");
}
#Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.setContentType(MediaType.APPLICATION_JSON);
response.setCharacterEncoding("UTF-8");
Dao dao = new Dao();
// return values as string.
String email = request.getParameter("email");
String password = request.getParameter("paswd");
System.out.println("Your email: " + email );// Delete Later!!
System.out.println("Your password: " + password);// Delete Later!!
System.out.println("Test passed0");
// Read reference values from DB
String salt = dao.getUserSalt(email);
String hashpw = dao.getUserpasswordHash(email);
System.out.println("Test 1 passed");
dao.checkemail(email);
try {
System.out.println("Test 2 passed");
if (SecurityUtils.isPasswordOk(hashpw, password, salt)) {
System.out.println("Test 3 passed");
String data = email;
HttpSession session = request.getSession();
User user = dao.readUserInfo(data);
dao.close();
System.out.println("Test 4 passed");
session.setAttribute("LoggedUser", user);
System.out.println("Session: " + request.getSession(false));
session.setMaxInactiveInterval(30 * 60);
System.out.println("Test 5 passed");
String encodedURL = response.encodeRedirectURL("/userInfo?email=" + data);
System.out.println("Final Test 6 passed");
try {
response.sendRedirect(encodedURL);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} else {
dao.close();
RequestDispatcher rd = getServletContext().getRequestDispatcher("./index.html");
try {
rd.include(request, response);
} catch (ServletException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
The output I get on the console:
Your email: null
Your password: null
java.lang.NullPointerException
at security.SecurityUtils.getPasswordHashed(SecurityUtils.java:32)
at security.SecurityUtils.isPasswordOk(SecurityUtils.java:57)
at app.Login.doPost(Login.java:54)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:526)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:593)
at org.eclipse.jetty.servlet.ServletHolder$NotAsync.service(ServletHolder.java:1459)
at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:799)
at org.eclipse.jetty.servlet.ServletHandler$ChainEnd.doFilter(ServletHandler.java:1631)
at com.google.appengine.tools.development.ResponseRewriterFilter.doFilter(ResponseRewriterFilter.java:148)
at org.eclipse.jetty.servlet.FilterHolder.doFilter(FilterHolder.java:193)
at org.eclipse.jetty.servlet.ServletHandler$Chain.doFilter(ServletHandler.java:1601)
at ..Error continues...
I tried to switch the input type to submit and then added return false next to the onclick as the following onclick="loginAjax(this.form); return false" but that didn't help. I previously used similar ajax function with a form to send data to PHP and it worked fine. Any help would be much appreciated!

From the Documentation of XMLHttpRequest
XMLHttpRequest send() accepts an optional parameter which lets you specify the request's body; this is primarily used for requests such as PUT. If the request method is GET or HEAD, the body parameter is ignored and the request body is set to null.
Apparently you are sending JSON data into your request body whereas you are expecting your data in request Parameter
String email = request.getParameter("email");
String password = request.getParameter("paswd");
Certainly it will return NULL
In this case you need to read request body from request.getInputStream()
Check this answer

try
xmlhttp.open("POST","./login?email=" + user.email + "&paswd=" + user.paswd,false);
xmlhttp.send();
instead of
xmlhttp.open('POST', './login', false);
xmlhttp.send(jsonUser);
OR YOU CAN USE JQUERY AJAX
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
function loginAjax(form) {
var user = new Object();
user.email = form.email.value;
user.paswd = form.paswd.value;
var jsonUser = JSON.stringify(user);
$.ajax({type: "POST",
url:"./login",
data:jsonUser,
success:function(result){
alert("Success");
}
});
}
</script>

Ajax call falls into error before running the controller

I have an ajax call that is falling into error block before even running the controller.
The strange thing is that sometimes(after multiple requests) it does run succesfully but it does not save the cookies in the controller.
I think it could be the ajax call or some permission error.
AJAX CALL:
$('#loginAWGPE').on('click', function () {
var cpfLogin = $('#cpfValidacao').val().replace(/[^\d]+/g, '');
console.log(cpfLogin);
console.log(urlOrigem + appPath + "Login/validaCPF");
$.ajax({
type: 'POST',
url: urlOrigem + appPath + "Login/validaCPF",
datatype: String,
data: {
cpf: cpfLogin
},
success: function (teste) {
console.log('dataS: ' + teste);
if (teste = true) {
window.location = urlOrigem + appPath + "ProjetoEletrico/Index";
} else {
alert('CPF não cadastrado na Agência Virtual!');
}
},
error: function (teste2) {
console.log('dataE: ' + teste2);
alert('Erro na execusão');
}
});
});
-------CONTROLLER:
public JsonResult validaCPF(String cpf)
{
if (String.IsNullOrEmpty(cpf))
{
Response.StatusCode = (int)HttpStatusCode.Unauthorized;
return Json(false);
}
WebAPIPArameter id = new WebAPIPArameter();
id.ParameterName = "id";
id.ParameterValue = cpf;
List<WebAPIPArameter> list = new List<WebAPIPArameter>();
list.Add(id);
Usuario userInfo = (Usuario)apiClientSistema.GetItem<Usuario>(serviceNameUserInfo, list);
if (userInfo == null)
{
return Json(false);
}
else
{
CultureInfo cult = new CultureInfo("pt-BR");
String dataStr = userInfo.DTH_ULTIMO_ACESSO.ToString("dd/MM/yyyy HH:mm:ss", cult);
HttpCookie cook = new HttpCookie("UserInfo");
cook["cpfCnpj"] = userInfo.NUM_CPF_CNPJ_CLIENTE.ToString();
cook["nomeCompleto"] = userInfo.NOM_CLIENTE;
cook["dataAcesso"] = dataStr;
cook["email"] = userInfo.END_EMAIL;
cook.Expires = DateTime.Now.AddHours(4);
Response.Cookies.Add(cook);
//cookie de autenticacao
FormsAuthenticationTicket authTicket = new FormsAuthenticationTicket(
1,
cpf, // Id do usuário é muito importante
DateTime.Now,
DateTime.Now.AddHours(4),
true, // Se você deixar true, o cookie ficará no PC do usuário
"");
HttpCookie cookieAuth = new HttpCookie(FormsAuthentication.FormsCookieName, FormsAuthentication.Encrypt(authTicket));
Response.Cookies.Add(cookieAuth);
}
Response.Redirect("~/ProjetoEletrico/Index");
return Json(true);
}

I figure it out. It was a stupid mistake....
I forgot the "submit" in my form button and I also the ajax call.

How to download a file using window.open()

I am trying to download a file from server using window.open(path,'_blank','download') but it just opens it in a new tab. How do I download the file? Yes I did check for other similar question but none of them work. Also I've tried this but it didn't work.
$scope.docView = function () {
Method.getbyId("api call",docId).then(function(response) {
}).catch(function (data) {
console.log("Unknown Error");
});
}
}
/*this.getbyId = function (path, id) {
return $http.get(appSetting.apiBaseUrl + path + "/" + id);
};
*/
[Route("api call")]
[HttpGet]
public IHttpActionResult ViewDocument (Guid? docId)
{
/*background work*/
response.Message = filePath;
var bytes=System.IO.File.ReadAllBytes(prevPath);
HttpContext.Current.Response.Buffer = true;
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.ClearHeaders();
HttpContext.Current.Response.ContentType = value.Format;
string Name = value.DocumentName;
HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=" + Name);
HttpContext.Current.Response.BinaryWrite(bytes);
}
}
catch (Exception ex)
{
Utils.Write(ex);
}
return Ok(response);
}

To force the browser to download the file (instead of displaying it, in another tab or the current one) requires a special header to be sent along with the file body.
That's only possible if you can modify some things server-side.
You should send following headers :
Content-Disposition: attachment; filename"myfile.txt"
Content-Type: application/octet-stream; name="myfile.txt"
Content-Transfer-Encoding: binary
Of course, replace application/octet-stream by the content-type of your file, if known (application/pdf, image/jpeg, etc.)

Save excel file received from the server on client machine

I have an link ("a" element) that sends a post request to the server. The server responds with an excel file that I want to download in the client side.
SERVER CODE:
#RequestMapping(value="/applicabilityExcel", method=POST)
#ResponseBody
public void getApplicability(#RequestParam("id") String reportId, HttpServletResponse response, HttpServletRequest request) throws IOException{
int id = Integer.valueOf(reportId);
Report report = repository.getReport(id);
InputStream is = new ExcelWriter().getConformityMatrix(report);
response.setContentType("application/vnd.ms-excel");
org.apache.commons.io.IOUtils.copy(is, response.getOutputStream());
response.flushBuffer();
}
CLIENT CODE:
<a class="appMatrix" href="<c:out value="${report.id}" />"> App</a>
$(".appMatrix").click(function(e) {
e.preventDefault();
$.post( "/applicabilityExcel",
{id:$(this).attr("href")},
function(data){
console.log(data);
//I have the file in data variable and I need now to stock it in the client machine (open dialog window, save it directly...)
});
});
My problem is I don't know what to do to stock this file in client machine ("download it").
I tried to donwload the file as text/base64, put it on href of "a" element and call click() but it doesn't work for me.
All responses and suggestions are welcome.

Maybe you can try this here , works for me
$scope.exportExcel = function(){
var self = this;
var url = //yourapi;
$http.get(url, { responseType: "arraybuffer" }).then(
function (result) {
var blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
var a = document.createElement('a');
var url = URL.createObjectURL(blob);
a.href = url;
a.download = ""//yourfilename
a.target = '_blank';
document.body.appendChild(a);
a.click();;
});
};

How to upload a screenshot using html2canvas?

Using html2canvas how can I save a screen shot to an object? I've been exploring the demos, and see that the function to generate the screenshot is generated as follows:
$(window).ready(function() {
('body').html2canvas();
});
What I've tried doing is
$(window).ready(function() {
canvasRecord = $('body').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
upload(dataURL);
});
And, I then pass it to my upload() function. The problem I am having, is I can't figure out where the screenshot is being made in the html2canvas() library or what function returns it. I've tried converting the canvas object using this answer from SO (though I'm not certain I need to do this).
I just asked a question on how to upload a file to imgur, and the answers there (particularly #bebraw's) help me to understand what I need to do.
The upload() function is from the Imgur example api help:
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}

I have modified and annotated the method from this answer. It sends only one file, with a given name, composed from a <canvas> element.
if (!('sendAsBinary' in XMLHttpRequest.prototype)) {
XMLHttpRequest.prototype.sendAsBinary = function(string) {
var bytes = Array.prototype.map.call(string, function(c) {
return c.charCodeAt(0) & 0xff;
});
this.send(new Uint8Array(bytes).buffer);
};
}
/*
* #description Uploads a file via multipart/form-data, via a Canvas elt
* #param url String: Url to post the data
* #param name String: name of form element
* #param fn String: Name of file
* #param canvas HTMLCanvasElement: The canvas element.
* #param type String: Content-Type, eg image/png
***/
function postCanvasToURL(url, name, fn, canvas, type) {
var data = canvas.toDataURL(type);
data = data.replace('data:' + type + ';base64,', '');
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
var boundary = 'ohaiimaboundary';
xhr.setRequestHeader(
'Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.sendAsBinary([
'--' + boundary,
'Content-Disposition: form-data; name="' + name + '"; filename="' + fn + '"',
'Content-Type: ' + type,
'',
atob(data),
'--' + boundary + '--'
].join('\r\n'));
}

This code works for me. It will generate screenshot by html2canvas, upload the screenshot to imgur api, and return the imgur url.
<button class="upload" >Upload to Imgur</button>
<script>
$(".upload").on("click", function(event) {
html2canvas($('body'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
try {
var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
} catch(e) {
var img = canvas.toDataURL().split(',')[1];
}
// open the popup in the click handler so it will not be blocked
var w = window.open();
w.document.write('Uploading...');
// upload to imgur using jquery/CORS
// https://developer.mozilla.org/En/HTTP_access_control
$.ajax({
url: 'http://api.imgur.com/2/upload.json',
type: 'POST',
data: {
type: 'base64',
// get your key here, quick and fast http://imgur.com/register/api_anon
key: 'your api key',
name: 'neon.jpg',
title: 'test title',
caption: 'test caption',
image: img
},
dataType: 'json'
}).success(function(data) {
w.location.href = data['upload']['links']['imgur_page'];
}).error(function() {
alert('Could not reach api.imgur.com. Sorry :(');
w.close();
});
},
});
});
</script>

//Here I am using html2Canvas to capture screen and Java websockets to transfer data to server
//Limitation:Supported on latest browsers and Tomcat
Step1)Client Side : webSock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Arun HTML File -->>
<html>
<head>
<meta charset="utf-8">
<title>Tomcat web socket</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8080/WebSocketSample/wsocket");
ws.onopen = function () {
console.log("Web Socket Open");
};
ws.onmessage = function(message) {
console.log("MSG from Server :"+message.data);
//document.getElementById("msgArea").textContent += message.data + "\n";
document.getElementById("msgArea").textContent +" Data Send\n";
};
function postToServerNew(data) {
ws.send(JSON.stringify(data));
document.getElementById("msg").value = "";
}
//Set Interval
setInterval(function(){
var target = $('body');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var jsonData = {
type: 'video',
data: data,
duration: 5 ,
timestamp: 0, // set in worker
currentFolder: 0,// set in worker
};
postToServerNew(jsonData);
}
});
},9000);
function closeConnect() {
ws.close();
console.log("Web Socket Closed: Bye TC");
}
</script>
</head>
<body>
<div>
<textarea rows="18" cols="150" id="msgArea" readonly></textarea>
</div>
<div>
<input id="msg" type="text"/>
<button type="submit" id="sendButton" onclick="postToServerNew('Arun')">Send MSG</button>
</div>
</body>
</html>
Step2)Server Side
File 1)
package Arun.Work;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.RandomAccessFile;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.nio.MappedByteBuffer;
import java.nio.channels.AsynchronousFileChannel;
import java.nio.channels.FileChannel;
import java.nio.charset.Charset;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.Future;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;
/**
* Need tomcat-koyote.jar on class path, otherwise has compile error
* "the hierarchy of the type ... is inconsistent"
*
* #author Arun
*
*/
public class MyInBound extends MessageInbound {
private String name;
private WsOutbound myoutbound;
private String targetLocation;
public MyInBound(HttpServletRequest httpSerbletRequest, String targetLocation) {
this.targetLocation = targetLocation;
}
#Override
public void onOpen(WsOutbound outbound) {
System.out.println("Web Socket Opened..");
/*this.myoutbound = outbound;
try {
this.myoutbound.writeTextMessage(CharBuffer.wrap("Web Socket Opened.."));
} catch (Exception e) {
throw new RuntimeException(e);
}*/
}
#Override
public void onClose(int status) {
System.out.println("Close client");
// remove from list
}
#Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
System.out.println("onBinaryMessage Data");
try {
writeToFileNIOWay(new File(targetLocation), arg0.toString() + "\n");
} catch (Exception e) {
e.printStackTrace();
} finally {
//this.myoutbound.flush();
}
}// end of onBinaryMessage
#Override
protected void onTextMessage(CharBuffer inChar) throws IOException {
System.out.println("onTextMessage Data");
try {
writeToFileNIOWay(new File(targetLocation), inChar.toString() + "\n");
} catch (Exception e) {
e.printStackTrace();
} finally {
//this.myoutbound.flush();
}
}// end of onTextMessage
public void writeToFileNIOWay(File file, String messageToWrite) throws IOException {
System.out.println("Data Location:"+file+" Size:"+messageToWrite.length());
//synchronized (this){
byte[] messageBytes = messageToWrite.getBytes();
RandomAccessFile raf = new RandomAccessFile(file, "rw");
raf.seek(raf.length());
FileChannel fc = raf.getChannel();
MappedByteBuffer mbf = fc.map(FileChannel.MapMode.READ_WRITE, fc.position(), messageBytes.length);
mbf.put(messageBytes);
fc.close();
//}
}//end of method
/*
* //Working Fine public void writeToFileNIOWay(File file, String
* messageToWrite) throws IOException { byte[] messageBytes =
* messageToWrite.getBytes(Charset.forName("ISO-8859-1")); RandomAccessFile
* raf = new RandomAccessFile(file, "rw"); raf.seek(raf.length());
* FileChannel fc = raf.getChannel(); MappedByteBuffer mbf =
* fc.map(FileChannel.MapMode.READ_WRITE, fc.position(),
* messageBytes.length);
*
* mbf.put(messageBytes); fc.close(); }
*/
}
File 2)
package Arun.Work;
import java.io.File;
import java.util.concurrent.ConcurrentHashMap;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
/**
* WebSocketServlet is contained in catalina.jar. It also needs servlet-api.jar
* on build path
*
* #author Arun
*
*/
#WebServlet("/wsocket")
public class MyWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 1L;
// for new clients, <sessionId, streamInBound>
private static ConcurrentHashMap<String, StreamInbound> clients = new ConcurrentHashMap<String, StreamInbound>();
#Override
protected StreamInbound createWebSocketInbound(String protocol, HttpServletRequest httpServletRequest) {
// Check if exists
HttpSession session = httpServletRequest.getSession();
// find client
StreamInbound client = clients.get(session.getId());
if (null != client) {
return client;
} else {
System.out.println(" session.getId() :"+session.getId());
String targetLocation = "C:/Users/arsingh/Desktop/AnupData/DATA/"+session.getId();
System.out.println(targetLocation);
File fs=new File(targetLocation);
boolean bool=fs.mkdirs();
System.out.println(" Folder created :"+bool);
client = new MyInBound(httpServletRequest,targetLocation+"/Output.txt");
clients.put(session.getId(), client);
}
return client;
}
/*public StreamInbound getClient(String sessionId) {
return clients.get(sessionId);
}
public void addClient(String sessionId, StreamInbound streamInBound) {
clients.put(sessionId, streamInBound);
}*/
}