JQuery - $.ajax POST does not send .data to web server

Question

I am using the JQuery $.ajax post command to invoke an ajax event on my web server:

var formParams = \"fe1=y&fe2=m&fe3=m\";

$.ajax({
    type: \'POS         


        

Answer 1

Use success:

var formParams = "fe1=y&fe2=m&fe3=m";

$.ajax({
    type: 'POST',
    url: '/foo.jsp',
    async: false,
    data: formParams,
    success: function(data) {
       alert('response data = ' + data);
    }
});

Answer 2

After frustratingly trying for four hours, I found out that it is able to achieve this by setting the contentType in ajax POST as follows,

var dataToSend = {
     "username" : $("#username").val(),
     "password" : $("#password").val()
};

$.ajax({
   type: "POST",
   url: "somepage.jsp",
   data: dataToSend,  
   contentType: "application/x-www-form-urlencoded; charset=UTF-8", //this is must
   success: function(datum, msg, textStatus){
        $("#result").html("<h3>" + "Status : " + msg + "</h3>")
        .fadeIn("slow");
  }
});

Answer 3

Your code as quoted is fine (I've tried it locally).

My guess is that the formParams string in your question is just an example, and in reality you're doing something to generate that string on the fly, and the problem lies in that code instead.

For instance, are you sure you're escaping characters correctly (using encodeURIComponent)? Or better yet, let jQuery deal with it, like this:

$.ajax({
    type: 'POST',
    url: '/foo.jsp',
    async: false,
    data: {
        fe1: $("#somefield1").val(),
        fe2: $("#somefield2").val(),
        fe3: $("#somefield3").val()
    },
    complete: function(xmlRequestObject, successString){
        ymmReceiveAjaxResponse(xmlRequestObject, successString);
    }
});

If you pass in an object, jQuery will handle the URI-encoding for you. If you really want to do it yourself:

var formParams =
    "fe1=" + encodeURIComponent($("#somefield1").val()) +
    "fe2=" + encodeURIComponent($("#somefield2").val()) +
    "fe3=" + encodeURIComponent($("#somefield3").val());
$.ajax({
    type: 'POST',
    url: '/foo.jsp',
    async: false,
    data: formParams,
    complete: function(xmlRequestObject, successString){
        ymmReceiveAjaxResponse(xmlRequestObject, successString);
    }
});

There I haven't encoded the field names because those names don't have any special chars in them; you need to if your form names are more interesting than that.

Answer 4

The cause of the problem was found using FireBug and opening the opening the Net gadget.

I'm seeing that the web server is responding with a status 302 on the call to the web page.

Expanding upon the 302 request in Firebug/Net, and examining the Params, Headers, Response, and HTML quickly identified that it was an application specific issue originating on the server.

Thanks for everyone's feedback

Answer 5

Try this :

$.ajax({
    type: 'POST',
    url: '/foo.jsp',
    async: false,
    data: { fe1: "y", fe2: "m", fe3: "m" },
    complete: function(xmlRequestObject, successString){
        ymmReceiveAjaxResponse(xmlRequestObject, successString);
    }
});

It should work.