Convert ajax function to jquery

Question

I would like to convert this ajax function to a jquery function but im not sure how it would be done in jquery

function ajax_posta() {
// Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
    var url = "javas.php";


    hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function () {
        if (hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById('status').innerHTML = return_data;
        }
    }
// Send the data to PHP now... and wait for response to update the status div
    hr.send("num=" + (--num)); // Actually execute the request
    document.getElementById('status').innerHTML = "<img src = 'loading.gif' height =     '30'     width = '30'>";

}
$(document).ready(function()
{
    $('.eventer.button').click(function () {
        var self = this;
        $.post('javas.php', function (data) {
            $(self).parent('div').find('.status').html(data);
        })
    });
}
)
;
</script>

+1 for putting up with my initial sloppiness :)

Adam Rackis
– Adam Rackis

2011-12-16 20:42:13 +00:00
Commented Dec 16, 2011 at 20:42 — Adam Rackis
– Adam Rackis, Commented Dec 16, 2011 at 20:42

Adam Rackis · Accepted Answer · 2011-12-16 21:41:14Z

2

You're pretty much there

$.ajax('javas.php', {
    success: function(response) {
          $(".status").html(response);
    }, 
    data: "num=" + (--num)
});

If these are the only two pieces of data you need to send to your request, you could just use $.post, but the advantage here is that if you ever want to specify more options, like contentType, all you'd have to do is add it to the existing options object.

edited Dec 16, 2011 at 21:41

answered Dec 16, 2011 at 19:52

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

foshoeiyyy Over a year ago

please may you explain a little more :D

foshoeiyyy Over a year ago

small problem, status is not an Id it is a class

Adam Rackis Over a year ago

@foshoeiyyy - I added in your content type like your original code, and I made the callback more similar to the original.

Ortiga Over a year ago

+1, but I think this content-type is default for post, so it isn't necessary.

Adam Rackis Over a year ago

@foshoeiyyy - I assumed it was an id since you were calling it with getElementById in your original code.

|

Collectives™ on Stack Overflow

Convert ajax function to jquery

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related