CODEWITHSUNDEEP
jqueryajax
hema Abhijit
hema Abhijit

Reputation: 1

Ajax post function not updating html code

My Ajax post request updates the HTML on success function, but it disappears after complete function.

Here is my Ajax request:

$.ajax({
    type: 'POST',
    url: 'http://api.open-notify.org/astros.json',
    dataType: 'json',
    async: false,
    dataType: 'json',
    success: (data) => {
        alert(data.Title)
        $("#final").append("Success")
    },
    error: (data) => {
        $("#final").append("error")
    }, complete: () => {
        $("#final").append("#################")
        alert("complete")
    },
    timeout: 3000 
});

What changes should be made to make sure updated html code is shown?

Upvotes: 0

Views: 628

Answers (2)

Kalob Taulien
Kalob Taulien

Reputation: 1918

You're so close!

If you right click and select "inspect", and then under "console" you'll see Ajax errors. In this case, it was returning a 405 Method Not Allowed, meaning the POST request was failing.

I've simplified your Ajax request a bit and made it work. Here's a working jsfiddle demo.

Upvotes: 1

Chepech
Chepech

Reputation: 5541

There are also some unnecessary parameters you are adding to the Ajax call, your request for instance should be a GET and not a POST.

$.ajax({
    url:'http://api.open-notify.org/astros.json',
    complete: function (response) {
        $('#output').html(response.responseText);
    },
    error: function () {
        $('#output').html('There was an error!');
    },
});

Try it here.

Upvotes: 0

Related Questions