Question

I am using jQuery and a Java based backend system. I am a newbie with jQuery / AJAX and I want to do a first call.

I have this kind of HTML list:

<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

This content should be fetched from the backend system. How can I do this? Are there any tutorials? If it is one value, it is clear to me, I can tell for example a text input field that the values should be the result of the AJAX call.
But what about such a HTML list? How should I prepare the JSON message in the backend system, how to handle in the frontend system?

Best Regards

Answer 1

In such cases it’s best to render some javascript server-side and use jQuery getScript function. So you would do something like (it’s a pseudo-code, you should adapt it for your Java backend):

s = escape_javascript(render_new_list());
return "$('#mylist').html(" + s + ");";

You could also render only the list and at client side do:

$.get(url, function (data) {
  $('#mylist').html($(data));
}, 'text');

If you really want to use JSON then something like this should work:

$.getJSON(url, function(data) {
  var l = $('#mylist').empty();
  $.each(data, function(index, value) {
    l.append($('<li>' + value + '</li>'));
  });
});

Assuming you send list of values you want displayed ([“test1”, “test2”] for example).