How to use Ajax in Play

Play internally uses the JQuery JavaScript Library, which allows us to perform AJAX operations very conveniently. At the same time, in order to be able to easily generate an action in JavaScript, the corresponding Url,play also provides a jsAction label to simplify the operation.

Use jsaction tags with jquery

On the play page, if we want to get a URL for an action, we usually don't write a URL directly, but write a function call like Java, which is parsed and generated by play. The advantage of doing this is that you can let play check that our call is not wrong and will not produce the wrong URL.

For example, in the routes file, we define one of the following route:

GET     /hotels/list        Hotels.list

Of these, Hotels.list there are three parameters search, size, page . If we want to get the URL for it, we'll do this:

@{Hotels.list(‘x‘, 10, 1)}

Note that the parameter values must be specified well. In the end we will get a URL like this:

/hotels/list?page=10&search=x&size=1

Sometimes, however, parameter values cannot be determined beforehand. For example, we want to use Ajax in JavaScript to access this URL, and the parameter value is based on the user input, what to do?

#{jsAction /}Tag is to solve this problem, its role is to generate a JavaScript function, call the function and pass some parameters, the corresponding correct URL is generated.

Write a complete example first:

<script type="text/javascript">   var listAction = #{jsAction @list(‘:search‘, ‘:size‘, ‘:page‘) /}   $(‘#result‘).load(       listAction({search: ‘x‘, size: ‘10‘, page: ‘1‘}),        function() {           $(‘#content‘).css(‘visibility‘, ‘visible‘)       }   )</script>

In this case, we used the jsAction . This line of code:

var listAction = #{jsAction @list(‘:search‘, ‘:size‘, ‘:page‘) /}

The following will be generated:

var listAction = function(options) {var pattern = ‘/hotels/list?page=:page&search=:search&size=:size‘; for(key in options) { pattern = pattern.replace(‘:‘+key, options[key]); } return pattern }

As you can see, its rationale is simple: construct a URL with some placeholders that will be replaced with real data.

So after the listAction({search: ‘x‘, size: ‘10‘, page: ‘1‘}) call to Listaction, a correct URL is returned:/hotels/list?page=10&search=x&size=1

If we don't use listAction tags, we have to write a similar function ourselves.

In addition, the .load() function is provided by jquery, which will initiate an AJAX get request with the address of the first parameter of the request. The second parameter is a function that will be called when a reply is received successfully.

Finally, this code sends the following request:

GET /hotels/list?search=x&size=10&page=1

The return value will be some HTML code that will replace #result the content.

In addition to Html,jquery, you can also handle return values for JSON or XML types. We only need to use different render methods (such as Renderjson, Renderxml, or directly using render to process an XML template) in the corresponding controller.

For more information about jquery, refer to the official jquery documentation.

In addition, if we need to send a POST request, you can use the following code:

$.post(listAction, function(data) {  $(‘#result‘).html(data);});

Continue discussion

Deal with internationalization.

How to use Ajax in Play