javascript - URL 太长 - 如何在 jquery 中对 anchor 标记执行 POST

Question

在我的应用程序中，我使用 JQuery 数据表来显示我的产品详细信息。我有很多购买过滤器(价格、产品类型等)，最后在数据表中用户有链接来查看所选产品的详细信息。表格示意图如下；

在表填充时，我已将过滤器参数附加到 anchor 元素的 href 中。代码片段如下；

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

此处 getFilters() 有时会返回 100 个过滤器，因此创建的 url 太长。我认为，虽然默认 anchor 链接单击，但它们会作为 GET 请求传递。因此可能存在大小限制。

所以我不希望我的用户在选择更多过滤器时得到奇怪的结果..

我计划执行以下操作:

每当用户单击该链接时，它都会调用 javascript 中的方法并执行表单发布(因为需要重新加载页面)。请指导我，如何在 javascript 或 jquery 中实现这一目标，或者任何其他更好的方法来实现这一目标。

我正在使用 Spring MVC + JSP + Javascript 和 JQuery

Answer 1

这是一个开始:

使用 XMLHttpRequest 对象:

getXHR 函数的来源: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");