Best way to submit search criteria to the server with AJAX?

Question

Hi. Please consider the following HTML:

<input type='text' id='name'/>
<option id='option'>
  <select value='1'>hi</select>
  <select value='2'>bye</select>
</option>
<input type='text' id='date'/>

This is a very simple form used to get search criteria from a user. I need to submit this search criteria to the server with an AJAX call. What is the best data type/structure to use to do this? And why?

I'm currently thinking a string vs. JSON object. So, I'll either pass

"John|2|2010-10-10" 

to the server or I'll pass

{"name":"John","option":2,"date":"2010-10-10"}

Maybe there is some other creative way to deal with search criteria? This criteria is being shot to the server only one time, it doesn't come back to js.

Thanks.

Answer 1

Use the jQuery form plugin

http://jquery.malsup.com/form/

Answer 2

It's always best to create an own data structure to transport data. You can design the format 100% the way you need and expect it to be, so it's small, fast and therefore efficient.

The second best option is JSON, which is already pretty lightweight and fast. But again, no format beats your own.

The downsite of this is obvious, it's not compatible nor portable. So you have to take that into consideration.

Answer 3

Google uses querystrings, the equivalent of:

search?name=John&option=2&date=2010-10-10

This has a few advantages:

• searches can be bookmarked or emailed as links
• its appropriate that a search is a GET request rather than a POST, since it doesn't change the state on the server
• it gives you an easy "poor man's API" whereby a request to perform a particular search can be generated very simply

disadvantages:

• you have to URL-encode everything
• search strings get archived in logs, etc.

That said, if you're choosing between the options you gave, I would choose JSON: it's a bit longer, but I think it will save you a lot of headaches to have explicitly named parameters (rather than relying on location within a string).

Answer 4

If you wrap your HTML in a <form> tag, you can easily use the $.serializeArray() function in jQuery.

http://api.jquery.com/serializeArray/

$.serializeArray() creates a JavaScript object literal in the form of:

[ {name: a, value:1}, {name: b, value: 2}, ...]

This is done, I believe, because your form could have multiple fields with the same name. An associative array wouldn't support this.

I'd recommend that you send your data to your server in a JSON format (using serializeArray or some other method) rather than a plain string. JSON is more standardized and can handle escaping characters. If you're using pipe-delimited strings, then you have to take into account when a user wants to submit a pipe (|) to the server. Then you get into situations where you have crazy delimiters like ||** between values. (I've seen this -- it's ugly!). Stick with JSON.

If you'd prefer a more querystring-like format (e.g. a=1&b=2&c=3) that you can include in your request body, you can use $.serialize().

http://api.jquery.com/serialize/