通过传递参数使href（锚标签）请求POST而不是GET

Question

The issue is that when I am using the below approach, the entire URL is showing up. Maybe because of the GET request if href. I want to avoid this and and I want the POST request.

index.html

<a id="ccviewMiniStatementId">View mini statement</a>

nonFinancial.js

$('#ccviewMiniStatementId').click(function(event) {

    var ccMonthVal=$("#ccMonthId").val();
    var ccYearVal=$("#ccYearId").val();
    var cCRefNumId=$("#cCRefNumId").val();

    var errExpVal = validateCcExpiry();

    if (errExpVal==false)
    {
        event.preventDefault();
        return false;
    }

    // I am passing values to my controller and there it is GET 
    //because POST is not supported. I want to make it POST.
    $("#ccviewMiniStatementId").attr("href", "getpdfcreditcard?month="+ccMonthVal+"&year="+ccYearVal+"&cCReferenceNo="+cCRefNumId);
    $("#pdfViewer").submit();           
});

My controller NonFinancial.java

@RequestMapping(value="/getpdfcreditcard", method=RequestMethod.GET, params = {"month","year","cCReferenceNo"})
public ResponseEntity<byte[]> getPDF(@RequestParam(value="month", required = true) String month,
    @RequestParam(value="year", required = true) String year,
    @RequestParam(value="cCReferenceNo", required = true) String cCReferenceNo,
    HttpServletResponse response) throws IOException, SQLException {

    logger.debug("month/year/cCReferenceNo: "+month+"/"+year+"/"+cCReferenceNo);
}

So I would like: when I am clicking on an anchor tag it should do a POST. How do I do that? I don't want to use a <form></form>

Answer 1

looks like you are using jQuery, so it is easy:

$('a').click(function() {
    var fullLink = $(this).attr('href');
    var splittedLink = fullLink.split("?");
    var href = splittedLink[0];
    var qs = splittedLink[1];

    // convert qs to body
    var splittedQs = qs.split('&');
    var body = {};

    for(var key in splittedQs) {
        var t = splittedQs[key].split('=');
        body[t[0]] = t[1];
    }

    $.ajax({
        type: 'post',
        data: body,
        url: href,
        success: function() { ... }
    });

    return false;  // prevent default
});

Answer 2

It is not possible in HTML to make a href use POST. However as @modernator pointed out, you can use JavaScript to listen to the click event and then manually trigger an AJAX request.

Alternatively you could use a form with hidden inputs. In there you can specify the submit method. Example:

<form method="post" action="<your-url>">
    <input type="hidden" name="month" value="<month-value>">
    <button type="submit">View Statement</button>
</form>