jQuery: why does $.post does a GET instead of a POST

Question

I'm trying to do an ajax call and populate the "Data" div with the results of the ajax call, but i get an error saying: "Server Error in '/' Application. The resource cannot be found. Description: HTTP 404. Requested URL: /Home/GetStuff" When I look with Firebug the request was a GET to /Home/GetStuff and the answer was 404 Not found. Why I doesn't do a POST as I required in the ajax call? How can I do a POST?

I tried using $.post and got the same behavior, though I haven't checked the jquery code, I assume $.post is a wrapper around $.ajax.

Also i tried Ajax.ActionLink and it works fine, though I would like to use jQuery and not the Microsoft's ajax js libraries.

The code follows:

Home/TestStuff.aspx

function aClick() {
    $.ajax({
        type: "POST",
        url: $("#MeFwd").href,
        data: ({ accesscode: 102, fname: "JOHN", page: 0 }),
        dataType: "html",
        success: renderData
    });
};

function renderData(data) {
    $("#Data").html(data.get_data());
}


<div id="Data">
</div>
<div id="link">
    <a href="<%= Url.Action("GetStuff", "Home") %>" id="MeFwd" onclick="aClick"> Click Me!</a>
</div>

HomeController.cs

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetStuff(int accessCode, string fName, int? page)
{

return "<table><tr><td>Hello World!</td></tr></table>";
}

Answer 1

$('#MeFwd').click(function() {
    $.ajax({
        type: "POST",
        url: $("#MeFwd").href,
        data: ({ accesscode: 102, fname: "JOHN", page: 0 }),
        dataType: "html",
        success: function(data){
            $("#Data").html(data);
       });
    });
};

I don't think you can call a function on your return ... but I could be wrong.

Or look into load: http://docs.jquery.com/Ajax/load#urldatacallback

Answer 2

Change your onclick="aClick" to onclick="aClick(); return false;". Clicking the link is doing a get to the url instead of running your JS.