how to get data from server without refreshing the page

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..

You can use ajax call or more better if you can use `node.js` in this scenario. — user3145373 ツ, May 31 '14 at 04:44
did you try AJAX? can you check this link http://stackoverflow.com/questions/11133059/play-2-x-how-to-make-an-ajax-request-with-a-common-button — Hirak, May 31 '14 at 04:44
i tried that, but it returns the html code instead of the data i want — user29542, Jun 01 '14 at 03:06

score 1 · Answer 1 · answered Jun 01 '14 at 04:27

1

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.

answered Jun 01 '14 at 04:27

binary_assemble

394
3
17

great, thanks alot, it works. but i have a question, i printed out the data inside the get_data() java method, and i got the data in json format, like [ {"id":"demo", "timer":100, "start":0, ...}, ..] without the object keyword, that's exactly what i want, json format. however, for some reason after it returns the data to the ajax post request, the data has object keyword with it. any idea why this is the case? – user29542 Jun 01 '14 at 05:00
Can you post your get_data() method? I think you are writing it as a json format and json is JavaScript Object Notation. Which is just plain text. You can parse it with `JSON.parse`. You can refer to here http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript for more details. – binary_assemble Jun 02 '14 at 03:12

score 0 · Answer 2 · answered Jun 01 '14 at 04:09

0

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.

answered Jun 01 '14 at 04:09

Alireza

4,976
1
23
36

this is what i got [Object {id="demo", timer=100, start=0, ...}, Object {id="demo", timer=62, start=0, ...}, Object {id="demo", timer=22, start=0, ...}, Object {id="demo", timer=44, start=0, ...}, Object {id="demo", timer=55, start=0, ...}, Object {id="demo", timer=55, start=0, ...}, Object {id="demo", timer=55, start=0, ...}, Object {id="demo", timer=55, start=0, ...}, Object {id="demo", timer=55, start=0, ...}, Object {id="demo", timer=56, start=0, ...}, Object {id="demo", timer=44, start=0, ...}] – user29542 Jun 01 '14 at 04:25

score 0 · Answer 3 · answered Jun 02 '14 at 10:39

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);
}

how to get data from server without refreshing the page

3 Answers3

Linked