Making jQuery GET play nice with Spring MVC backend

Question

I have a jQuery web app frontend that I would like to make GET/POST ajax calls to a Java backend that is running on Spring MVC.

Here is the GET request I want to make:

http://www.myapp.com/backend/doSomething?a=1&b=2

On the server-side, here is my BackendController object:

@RequestMapping(value = "/backend/doSomething", method = RequestMethod.GET)
public ModelAndView handleDoSomething(@RequestParam("a") String a,
    @RequestParam("b") String b) {

    ModelAndView mav = new ModelAndView();
    mav.setViewName("backend/SomeView");

    // process the request...

    return mav;
}

So here's the jQuery I have attempted so far:

$.get({
    url: "/backend/doSomething?a=???&b=???",
    success: function(data) {
    }
    ???
});

I've read the jQuery $.get page and I'm still confused about several things:

1. What's the proper way of appending query string parameters into the url for GETs?
2. What's the proper way of adding form data into POSTs?
3. I see that the success function takes three params: data, textStatus, and jqXHR, but many examples I see only list the data portion - when do you pass it just data and when do you pass it all three?
4. What's the difference between the get's data property and its success: function (data) { ... } argument?
5. Is there any special configuration I need to do in my Spring backend so that jQuery can connect to it, or does jQuery not care about the backend at all?

I've tried looking these up but can't seem to get clear definitions for these items. Thanks in advance.

Answer 1

jQuery Get/Post Params

1. Url
2. Data - the data object which is where you would store the query string like data (ie post variables)
3. Success Handler (the extra params are not required which would be why you have seen it in different formats)
4. DataType - the data type expected back from the server

FYI, I believe the url param is the only required param. Your get call should look something along these lines:

$.get("/backend/doSomething", { a : a, b : b }, success: function(data) {
    // Perform Success code
});

By the way, you can also serialize a form to pass it through your post using something like:

$('form').serialize()

Edit:

Regarding naming the url, data, and success params when using jQuery $.get() and $.post(), this is not possible. These functions are shorthand versions of jQuery $.ajax(). There is no point in using get/post if you are going to what to do the long form anyways. If you want to specify the params then use ajax like so:

$.ajax({
    url: "/backend/doSomething", 
    data: { a : a, b : b }, 
    success: function(data) {
        // Perform Success code
    }
});

Answer 2

It's all there... (I mean in jQuery API and in the Internet.)

Basically you use $.get like this:

$.get('/backend/doSomething', // 1st argument: URL
  { a: 1, b: 2 }, // 2nd arg (optional): JS Object or String you want to pass
  function(data) { // 3rd arg (or 2nd in case data is missing) success callback
    alert('Success!'); // or sth else
});

So back to your questions:

1. Just pass second argument to $.get.
2. Use $.post instead (they're both similar and are just wrappers to $.ajax, see docs).
3. Usually you'll use only first parameter - data, in JavaScript method signatures doesn't have to match (speaking Java-like). You can ignore parameters if you like:

4. data as 2nd argument of $.get are input params you give to your controller, and success: function (data) is response output (probably @ResponseBody JSONified-by-Jackson object). I mean:

   function(data) {
     alert('Success! Data ' + data);
   }
   

   and

   function(data, textStatus, jqXHR) {
     alert('Success!');
   }
   

   are equivalent.

5. No, jQuery is just JavaScript library which makes things easier. Just use them both like there's written in docs.