js:ajax [Tutorial Site]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== AJAX ======
Your have a form, and there is a ''<button type='button' id='btn-save'>Save</button>'' in it. You can add click callback to this button to submit the form by ajax. Here we only covered what I would like to talk about. For more details, go to [[http://api.jquery.com/jquery.ajax/]].

===== Client Code =====
<code>
$("#btn-save").click(function(){
	var form = $(this).closest('form').get(0);
	var jform = $(form);
	$.ajax({
		method:"post",
		dataType: "json",
		url: jform.attr('action'),
		data: jform.serialize(),
		success: function(data, textStatus, jqXHR) {
			//DO YOU SUCCEE STUFF
		},
		error: function(jqXHR, textStatus, errorThrown){
			//DO YOU FAIL STUFF
		},
		complete: function(jqXHR, textStatus){
			//DO YOU FINAL STUFF NO MATTER SUCCESS OR ERROR
		}
	});
});
</code>

===== Server Code (in Grails) =====
Assume the client pass an 'id' field to the server. ''DomainObject'' can be any of your domain object that mapped to your data source, ''myService'' supposed to be any grails server that handle your business logic; MyException could be any of your own exception thrown by your business logic, and ''DateTimeTools'' is my own creation to handle date time related function call.

<code>
def myFunction(DomainObject domainObject) {
	try {
		myService.dosomething(domainObject)
		response.status = 200
		render([response: 'OK'] as JSON)
	}catch (MyException e) {
		response.status = 500
		render([error: "Unable to XXXX XXXX XXXX. ${e.getMessage()}"] as JSON)
	}catch (Exception e) {
		log.error("Time: ${DateTimeTools.getSystemCurrentTime()} myFunction: ${e.getMessage()}", e)
		response.status = 500
		render([error: "Fail to XXXX XXXX XXXX. Please contact system admin for support."] as JSON)
	}
}
</code>

===== jqXHR =====
A superset of XMLHTTPRequest. Here mainly, we talk about how to extract the response from the JSON server. In success, error, or complete callback function, you can extract the json response by ''jqXHR.responseJSON''. 

Let says we want to extract the ''error'' message from the server for the above code, we can do the following in the error callback.
<code>
var responseJson = jqXHR.responseJSON;
alert(responseJson.error);
</code>