Question

I’m trying to figure out how to get a response back from my $.post() and I can’t seem to figure it out. It works just fine in IE but chokes in FF and Chrome. I am sure it’s something really simple. I have read through as many postings here and on Google trying all the suggestions, still no luck. Can someone see what I am doing wrong? The response I should expect is testing.

Forgot to include what I am getting; in the Chrome and FF Firebug console I see the .error() message and all it has is ‘error’ … no description.

Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

HTML

<form id="frm">
    <input type="text" name="usr" />
    <input type="submit" value="Click" />
</form>

JQuery

$(function()
{
    $('form#frm').submit(function()
    {
        $.post('process.php',$('#frm').serialize(),function(response)
        {
            console.log('PHP returned : '+response);
        })
        .error(function(XMLHttpRequest,textStatus,errorThrown)
        {
            console.log('Error with ajax Function: '+ textStatus+' '+errorThrown);
        });
    });
});

PHP

<?php
print('testing');
?>

EDIT (For anyone else that’s having the same issue, this code works)

$(function()
{
    $('form#frm').submit(function(e)
    {
        e.preventDefault();
        $.post('process.php',$('#frm').serialize(),function(response)
        {
            /* Do something with response */
        })
        .error(function(XMLHttpRequest,textStatus,errorThrown)
        {
            alert('Error with ajax Function: '+ textStatus+' '+errorThrown);
        });
    });
});

Answer 1

I assume that since your you did not specify a form action and don’t prevent the form from submitting by returning false in the event handler, the page is being refreshed (you post to the same page and it simply reloads) before the AJAX callback is executed. That would not explain the error message though.