how to get data from server without refreshing the

Question

I am new to web development. My job is to get data from the server and plot them using amcharts every 1 or 2 seconds.

This is what i have so far:

<form id="getdata" role="form" method="post" action=@routes.DataApplication.get_data()>
    <input type="text" name="device" id="device">
    <input type="text" name="type" id="type">
    <button id = "submit" type="submit">Submit</button>
 </form>

Once I enter device and type and click the submit button, it will run the Java method get_data(). The method will search the database and return data that matches the device name, but the thing is it will display is the data in another page, for example www.somepage/getdata. The above html is in www.somepage/data page.

I tried using jquery .post() but the thing is it requires an url, I tried passing /getdata to it but didn't work.

My question is: is there a way to save the data we get from the @routes.DataApplication.get_data() action without reloading the page?

By the way, I am using play framework to develop the webpage.

UPDATE

Ok, making some progresses now, I tried using ajax post, but the data return (in console) is like this:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Here I got 11 objects. If i don't use ajax post (using the original post form method), I get 11 data points too.

Here is my code:

<script>    
$('#driver').click(function(evt) {
    var dataabc = $('form').serialize();
    console.log(dataabc);
    $('#errors').hide();
    $.ajax({
        type : 'POST',
        data :  dataabc, 
        url : '@routes.DataApplication.get_data()',
        success : function(data) {
            alert("good");
            console.log(data);
        },
        error : function(result) {
            setError('Make call failed');
        }
    });
    return false;
});
</script>

What get_data() does is just take the user input data (which is the form) and get corresponding data from the database and return ok(node);. This node is JsonNode

Any help would be appreciated..

Answer 1

It will be very helpful to tell us what exactly the url returns in response. Usually that should be XML or JSON. You can use FireBug or any other developer tools to catch the response and post it here.

Answer 2

Since you are getting an array of objects back in javascript and it is stored in data. You can loop through it and display the content is some div tag.

Example: Create an empty div to populate the data after a successful ajax call.

<div id="mytextarea"></div>

Then in your ajax success, instead of printing to console you would loop through the array and append the data to the innerHTML of the div tag like so...

var myTextArea = document.getElementById('mytextarea'); for (var x = 0; x < data.length; x++){ myTextArea.innerHTML = myTextArea.innerHTML + data[x].id + '<br/>'; }

Edit 1: I see you know your object's attributes so I updated the code to append just id to the text area.

Answer 3

IT doesn't decide what to return - it's YOU!

If you'll return for an instance JSON object in your get_data() action, your AJAX will receive a JSON, check yourself:

public static Result get_data(){
    ObjectNode node = Json.newObject();
    node.put("hello", "world");
    return ok(node);
}