How to call a java class function with javascript ajax on a localhost server

Question

I got something like this:

package beans;
import javax.ejb.Stateless;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("cc")
@Stateless
public class CardBean implements ICardRemote {

@Produces(MediaType.APPLICATION_JSON)
@Path("validate/{creditCard}")
@GET
@Override
public boolean Validate(@PathParam("creditCard")String creditCard){                 
    int sum = 0;                    
     boolean alternate = false;                 
     for (int i = creditCard.length() - 1; i >= 0; i--)                 
     {                         
        int n = Integer.parseInt(creditCard.substring(i, i + 1));                          
        if (alternate)                        
        {                                
             n *= 2;                                 
             if (n > 9)                              
            {                                
                n = (n % 10) + 1;                               
            }                         
         }                         
         sum += n;                        
        alternate = !alternate;                 
    }           
    return (sum % 10 == 0); //or true or false
}
}

There I got the function Validate

Now I got a HTML page, that looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="code.jquery.com/jquery-3.1.1.min.js"; integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b‌8=" crossorigin="anonymous">      </script>


</head>
<body>
<a
    href="http://localhost:8080/CreditCardWEB/rest/cc/validate/4111111111111111">Validan</a>
<br>
<a
    href="http://localhost:8080/CreditCardWEB/rest/cc/validate/4111111111111112">Nevalidan</a>
<br>

<br>
<input type="text" name="txtCC" value="4111111111111111" id="txtCC1">

<button name="btn" onclick="myFunction()">Click me!</button>
<br>
<br>
<p id="res">Result: </p>


<script>
function myFunction() {

    //    document.getElementById("res").innerHTML = "Result:" + txtCC1.value;
        var str = txtCC1.value;

         $.ajax({
            type: 'GET',
            url: './validate/'+str,                 
            success: function(data) {                               
                     document.getElementById("res").innerHTML = "Result:" + data;          
            },
            error: function(jqXHR, textStatus, errorThrown) {
                        //Do something on ERROR here                            
            }
        });                 
}
</script>

<br>

</body>
</html>

So in the end, I have a text field, with a hardcoded number in it.

On button click I need to take that number and send it into my validation function.

And once the function is done, I need the result to be written below the button.....here...

<p id="res">Result: </p>

So it has to be like Result:true, or Result:false

are you suppose to use javascript? since the code can completely be done with js alone — Semi-Friends, Nov 02 '16 at 13:18
as per your code. it doesn't seem needed in the process. but if you really like it then so be it — Semi-Friends, Nov 02 '16 at 13:49
hmm.. it seems that you're to get the validation from the other page. you can do so. create a page then create a request using jquery ajax/post/get . btw jquery has a built it ajax function. you can check its documentation if you want [here](http://api.jquery.com/jquery.ajax/) — Semi-Friends, Nov 02 '16 at 13:51
i am trying the stuff below, what Mechkov posted....it's that what i need....but i cant get it done.... — Elydasian, Nov 02 '16 at 13:59

Mechkov · Accepted Answer · 2016-11-02T13:58:54.840

1

You can do something like this (make sure you include jQuery library!):

function myFunction() {
    document.getElementById("res").innerHTML = "Result:" + txtCC1.value;
    var str = txtCC1.value;

    //Here i need a code to call my validation function 
    //like: var res=Validation (str);
    //and then do the  
    //document.getElementById("res").innerHTML = "Result:" + res;
    //DONE


     $.ajax({
        type: 'GET',
        url: './validate/'+str,   //Make sure you put the correct endpoint URL here!                
        success: function(data) { 
                    //DO SOMETHING HERE AFTER YOU GET THE RESPONSE FROM the validate function
                    document.getElementById("res").innerHTML = "Result:" + data;
                 },
        error: function(jqXHR, textStatus, errorThrown) {
                    //Do something on ERROR here                            
               }
    });

}

edited Nov 02 '16 at 13:58

answered Nov 02 '16 at 13:51

Mechkov

4,294
1
17
25

almost....but when i copy it to the code....where u typed the do something here after u get the response...there should the line document.getElementById("res").innerHTML = "Result:" + data; do that what i am hoping for, that is to type Result: true....but it dose not do anything -.- – Elydasian Nov 02 '16 at 13:56
and i dont know what to do with the error part...? And in the same line, what is data? true, false? or a string of 411111....? – Elydasian Nov 02 '16 at 13:57
Error part is optional. Only if you want to get notified or do something on error. For your first question, once you get the data (note how on Success you have function(data)), so once you get the 'data' check it if it is whatever you need to set it to 'true'. You decide what the logic is going to be there – Mechkov Nov 02 '16 at 13:58
The result would be true or false, based on your Controller logic (it returns a boolean), – Mechkov Nov 02 '16 at 14:00
I do this... function myFunction() { // document.getElementById("res").innerHTML = "Result:" + txtCC1.value; var str = txtCC1.value; $.ajax({ type: 'GET', url: './Validate/'+str, success: function(data) { document.getElementById("res").innerHTML = "Result:" + data; }, error: function(jqXHR, textStatus, errorThrown) { //Do something on ERROR here } }); } – Elydasian Nov 02 '16 at 14:01
if(data == 'true') do this else do something else – Mechkov Nov 02 '16 at 14:01
i did the if then else part....but again, nothing happens...i ll post an answer so u can take a look – Elydasian Nov 02 '16 at 14:03

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You will find answer for your question under this link: ANSWER

Read more about consuming rest service with javascript

edited May 23 '17 at 12:00

Community

1
1

answered Nov 02 '16 at 13:22

Marcin Gwóźdź

73
9

I just cant find any way for my concrete problem....but is it possible to do it without the http request? – Elydasian Nov 02 '16 at 13:35
It is not possible, this method can be only called by HTTP GET request – Marcin Gwóźdź Nov 02 '16 at 13:48

Elydasian · Answer 3 · 2016-11-02T14:48:01.517

Here is the correct code...thx to Mechkov

function myFunction() {
console.log($);
        var str = txtCC1.value;
         $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/CreditCardWEB/rest/cc/validate/'  +str,                 
            success: function(data) {                               
                     document.getElementById("res").innerHTML = "Result: " + data;         
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR +' : '+ textStatus +' : '+ errorThrown);             
            }
        });                 
}

How to call a java class function with javascript ajax on a localhost server

3 Answers3