We Keep Coding

How to place returned JSON data in a HTML Form

I need to place returned JSON data in HTML Form. I called database using web services and get JSON data. What I want is to place these JSON data into HTML input fields.
Sample JSON data (Returned as an array)
[{"username":"demo","email":"demo#gmail.com","password":"123"}]
The code in List.jsp
<form>
Enter Username:<br>
<input type="text" id="usernameEn" name="username"><br>
<button id="btnGet">Get</button>
</form>
<br><br>
<form>
Username:<br>
<input type="text" id="username" name="username"><br>
Email:<br>
<input type="text" id="email" name="email"><br><br>
Password:<br>
<input type="text" id="password" name="password"><br><br>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnGet").click(function(event)
{
event.preventDefault();
$.ajax({
type: 'GET',
url: "http://localhost:8080/WebServiceTest2/webresources/users/get/" + $('#usernameEn').val(),
dataType: "json",
success: function(data) {
console.log(data);
var userDetails = data;
renderDetails(userDetails);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus);
}
});
});
});
function renderDetails(data)
{
$('#username').val(data.username);
$('#email').val(data.email);
$('#password').val(data.password);
};
</script>

Your REST service is returning an array, so to populate the form you'd have to access the first element of the array:
$('#username').val(data[0].username);
$('#email').val(data[0].email);
$('#password').val(data[0].password);
Or you could do the assignment higher up so you don't have to change your renderDetails() function:
var userDetails = data[0];
Probably best to also add a check to see whether the returned array is not empty.

AngularJS http POST to Servlet

I went through a lot of StackOverflow answers and googled a lot but still could not find why my post request is not working.
This is my jsp:
<div class="container">
<form class="form-signin" ng-controller="MyController">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" ng-model="user.name" class="form-control" placeholder="Username" required autofocus>
<label for="password" class="sr-only">Password</label>
<input type="password" ng-model="user.password" id="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" ng-click="login()" type="submit">Sign in</button>
</form>
</div>
This is my controller:
app.controller('MyController', function($scope, $http) {
$scope.login = function() {
console.log($scope.user);
$http({
method : 'POST',
url : 'login',
data : $scope.user,
headers: {
'Content-Type': 'application/json'
}
}).success(function(data) {
console.log(data);
}).error(function(data) {
console.log(data);
});
console.log("POST done");
};
});
And my servlet:
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("inside do POST");
Gson gson = new Gson();
JsonParser parser = new JsonParser();
JsonObject obj = (JsonObject) parser
.parse(request.getParameter("data"));
Iterator it = (Iterator) obj.entrySet();
while (it.hasNext()) {
System.out.println(it.next());
}
System.out.println("over");
}
I keep getting this Null pointer exception
java.lang.NullPointerException
at java.io.StringReader.<init>(StringReader.java:50)
at com.google.gson.JsonParser.parse(JsonParser.java:45)
at com.zookeeperUI.controller.Login.doPost(Login.java:40)
Please tell me what am I doing wrong here .

Your request does not contain a URL parameter named "data", therefore request.getParameter("data") returns null and you get the NullPointerException.
You try to send a Javascript object via URL parameters which does not go well with non-shallow objects.
I would recommend to send the data as request payload:
JsonObject obj = (JsonObject) parser.parse(request.getReader());
On the client you need to make sure that your data is sent as proper JSON:
$http({
method : 'POST',
url : 'login',
contentType: 'application/json',
data : JSON.stringify($scope.user),
})...

i think you should be sending data as
$http({
method : 'POST',
url : 'login',
data : {data: $scope.user},
headers: {
'Content-Type': 'application/json'
}
}).success(function(data) {
console.log(data);
});
pay attention to data : {data: $scope.user}

You are using a POST request and your data is sent in the request body - not as parameter. You need to read the content using request.getReader().
// example using the javax.json.stream package
JsonParser parser = Json.createParserFactory().createParser(request.getReader());

How to check if form was submitted in Java

I have a form in jsp:
<form id="emailForm" data-role="form">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter full name..">
<input type="submit" id="emailSubmit" name="emailSubmit" class="btn btn-default" value="submit">
</form>
I send the form to controller using AJAX:
$("#emailSubmit").click(function(e){
e.preventDefault(); //STOP default action
var postData = $("#emailForm").serializeArray();
$.ajax(
{
type: "POST",
url : "HomeController",
data : postData,
success: function(data)
{
$("#emailResult").html("<p>Thank your for submitting</p>);
},
error: function(jqXHR, textStatus, errorThrown)
{
$("#emailResult").html("<p>ss"+errorThrown+textStatus+jqXHR+"</p>");
}
});
});
I check if it has been submitted in Controller here:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String emailSubmit = request.getParameter("emailSubmit");
if(emailSubmit != null){
// continue
}}
Can someone please tell me why when it checks if form was submitted in the controller that it is null?

For forms the standard way is to catch the submit event instead of the click event of the button:
$("#emailForm").submit(function(e){
e.preventDefault();
var postData = $(this).serializeArray(); // or: $(this).serialize();
$.ajax({
type: "POST",
url : "HomeController",
data : postData,
success: function(data)
{
$("#emailResult").html("<p>Thank your for submitting</p>);
},
error: function(jqXHR, textStatus, errorThrown)
{
$("#emailResult").html("<p>ss"+errorThrown+textStatus+jqXHR+"</p>");
}
});
});

I have tried several methods to be able to check the submit button isn't null and can't solve that issue. For now I have set a hidden input field in the form like so:
<input type="hidden" name="form" value="contactForm">
In controller I check for the form:
String form = request.getParameter("form");
if(form.equals("contactForm")){
// continue
}
Doing this enables me to know which form has been posted to the controller.

How to send file using javascript

I am trying to make an upload page which takes file to upload. I am using Spring framework here my query is on Upload button I am calling a JavaScript method which should send my file to controller using jQuery AJAX. Is there any way to pass this through JavaScript?
Following is the code which I am trying.
<body>
<div style="text-align: center; margin-top: 60px;">
<form enctype="multipart/form-data">
Select file:
<input type="file" name="dataFile" id="fileAttachment"/><br/><br/>
<div style="text-align: center; margin-top: 100px;">
<input style="cursor: pointer;" onmouseover="" onclick="uploadAttachment()" class="dialogbox" type="submit" value="Upload Report" />
</div>
</form>
</div>
</body>
JS:
<script language="Javascript">
function uploadAttachment(){
var Name = jQuery('#Name option:selected').text();
jQuery.post('upload',{Name:Name}
function(data){
if(data==1)
alert("success");
else
alert("failed");
});
}
</script>
on controller.java page following is the code written
#RequestMapping(value = "upload", method=RequestMethod.POST)
public #ResponseBody String upload(HttpServletRequest request, HttpServletResponse response,
#RequestParam("Name") String Name){
System.out.println(Name);
}

If you are in fact seeking a pure javascript way to upload an image/file, then the following tutorial from 2009 will tell you exactly how to do that:
http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html
I ran into this when I wanted to add basic-authentication to a form submission, without enabling cookies. E.g. when you have username/password fields with your filename, file, etc fields.
Hope this helps!

I think you can try the following code to upload file with javascript.
function uploadAttachment(){
$('#fileAttachment').trigger('click');
if (typeof timer != 'undefined') {
clearInterval(timer);
}
timer = setInterval(function() {
if ($('#fileAttachment').val() != '') {
clearInterval(timer);
$.ajax({
url: 'YOUR_UPLOAD_URL',
type: 'post',
dataType: 'json',
data: new FormData($('#fileAttachment').closest('form')[0]),
cache: false,
contentType: false,
processData: false,
success: function(response){
}
});
}
}, 500);
}
You need to replace YOUR_UPLOAD_URL with your server upload URL.

how to send json data to server using ajax

refer.jvmhost.net/refer247/registration, this is my url,i have to fetch request to this url like user details and should get the appropriate response in json format with status n error if it contains ..dont give me android code..
this is html page.
<head>
<script type="text/javascript" src="json2.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-position="fixed" data-inset="true" class="paddingRitLft" data-theme="c">
<div data-role="content" data-inset="true"> <img src="images/logo_hdpi.png"/>
</div>
</div>
<div data-role="content" data-theme="c">
<form name="form" method="post" onsubmit="return validate()">
<div class="logInner">
<div class="logM">Already have an account?</div>
<div class="grouped insert refb">
<div class="ref first">
<div class="input inputWrapper">
<input type="text" data-corners="false" class="inputrefer" placeholder="Userid" name="userid" id="userid" />
</div>
<div class="input inputWrapper">
<input type="password" data-corners="false" class="inputrefer" placeholder="Password" name="password" id="password" />
</div> <input type="submit" data-inline="true" value="Submit" onclick="json2()">
<p>Forgot Password
</p>
</div>
</div>
<div class="logM">New user? Create refer Account</div>
<input type="button" class="btnsgreen" value="Sign Up! its FREE" class="inputrefer" data-corners="false" data-theme="c" />
</form>
</div>
</div>
<p style="text-align: center;">© refer247 2013</p>
</div>
</body>
this is json2.js
function json2()
{
var json1={"username":document.getElementById('userid').value,
"password":document.getElementById('password').value,
};
//var parsed = jsonString.evalJSON( true );
alert(json1["username"]);
alert(json1["password"]);
};
so tell me how to send the json data to that url n obtain some response like if email
id is already exist if u registering with that id ..then give some error
like email id already exist n if registerd succesfully then give respone like registerd successfully and status msg..200 okk...

You can use ajax to post json data to specified url/controller method. In the below sample I am posting an json object. You can also pass each parameter separately.
var objectData =
{
Username: document.getElementById('userid').value,
Password: document.getElementById('password').value
};
var objectDataString = JSON.stringify(objectData);
$.ajax({
type: "POST",
url: "your url with method that accpects the data",
dataType: "json",
data: {
o: objectDataString
},
success: function (data) {
alert('Success');
},
error: function () {
alert('Error');
}
});
And your method can have only one parameter of string type.
[HttpPost]
public JsonResult YourMethod(string o)
{
var saveObject = Newtonsoft.Json.JsonConvert.DeserializeObject<DestinationClass>(o);
}

$.ajax({
url: urlToProcess,
type: httpMethod,
dataType: 'json',
data:json1,
success: function (data, status) {
var fn = window[successCallback];
fn(data, callbackArgs);
},
error: function (xhr, desc, err) {
alert("error");
},
});

function addProductById(pId,pMqty){
$.getJSON("addtocart?pid=" + pId + "&minqty="+ pMqty +"&rand=" + Math.floor((Math.random()*100)+1), function(json) {
alert(json.msg);
});
}
Here is a simple example, which will call on button click or onclick event and call addtocart servlet and passes 2 argument with it i.e. pId and pMqty.
and after successful completion it return message in alert which is set in that servlet in json.

var json1={"username":document.getElementById('userid').value,
"password":document.getElementById('password').value,
};
$.ajax({
url: '/path/to/file.php',
type: 'POST',
dataType: 'text',//no need for setting this to JSON if you don't receive a json response.
data: {param1: json1},
})
.done(function(response) {
console.log("success");
alert(response);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
on the server you can receive you json and decode it like so:
$myjson=json_decode($_POST['param1']);