Too long URL - How to do POST in jquery for anchor tag

Question

In my application, I'm using JQuery data table to show my product details. I've lot of purchase filters(price, product type etc.) and finally in data table users have link to view the selected product details. The schematic diagram of table is as below;

While table population, I've appended filter params to the href of anchor element. The code snippet is as below;

"mRender" : function(page, type, full) {
        return '<a href="' + CXT_PATH
                + '/page?filters='
                + getFilters()
                + '">' + "LINK" + '</a>'
                }                                       
                }

Here getFilters() some times returns 100's of filters, so the url created is too long. I think, while default anchor link click they are passed as GET request. So there could be a size limit.

So I don't want my users to get weird results, when they selected more filters..

I'm planning to do as below:

Whenever user clicks the link, it will invoke a method in javascript and do form post (because page reloading is required). Please guide me, how to achieve that in javascript or jquery OR any other better ways to achieve the same.

I'm using Spring MVC + JSP + Javascript & JQuery

Answer 1

Here is a start:

Using the XMLHttpRequest object:

Source for the getXHR function: XMLHttpRequest Browser Support

function getXHR() { 
  if (window.XMLHttpRequest) {
    // Chrome, Firefox, IE7+, Opera, Safari
    return new XMLHttpRequest(); 
  } 
  // IE6
  try { 
    // The latest stable version. It has the best security, performance, 
    // reliability, and W3C conformance. Ships with Vista, and available 
    // with other OS's via downloads and updates. 
    return new ActiveXObject('MSXML2.XMLHTTP.6.0');
  } catch (e) { 
    try { 
      // The fallback.
      return new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } catch (e) { 
      alert('This browser is not AJAX enabled.'); 
      return null;
    } 
  } 
}


var xhr = getXHR();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send("your-querystring");

Answer 2

you could try the following method, create a form in table and when clicking on filter link assign the filter value to hidden element in form and submit the form.

HML

<form action="<server_path>" method="post" id="filterform">
<input type="hidden" name="filters" id="filters" />
<input type="submit/>
</form>

Javascript/ Jquery

"mRender" : function(page, type, full) {
        return '<a onclick="' submitFilter() '">' + "LINK" + '</a>'
 }     

submitFilter: function (CXT_PATH){
       $( "#filters" ).val(getFilters());
       $( "#filterform" ).submit();
}