如果请求成功，如何确保我的ajax请求后的代码只运行？

Question

I have a link, delete, that removes an item from an array, and then removes a row from a table on my html page.

It runs the ajax request first to amend the array, then removes the row. If for some reason the ajax request was to fail then the html table row would still be deleted I think.

Is there a way to make sure subsequent code afer the ajax request only runs if it is successful? I tried moving it into the success function but then it didn't run at all..

This is how I have it set up at the moment...

$(document).ready(function () { //delete 
    $(document).on("click", "a[class='del']", function () {
        var ID = $(this).attr("id"); //<----- get the ID of the column      
        $.ajax({
            //contentType: "text",
            url: 'proDel.php', //the url you are sending datas to which will again send the result
            type: 'GET', //type of request, GET or POST
            dataType: 'json', // jQuery will parse the response as JSON
            data: 'val1=' + ID, //Data you are sending 
            success: function (data) {
                // do nothing, array was amended in php file                       
            }
        })

        //Code here that deletes the table row(runs whether the array was changed or not!!
    })
})

Answer 1

The problem might be that you are not returning valid JSON.

You were correct in thinking that you should move the code that deletes the table row into the success callback. You say you tried that, but the success callback was not executed.

Since you specify dataType: 'json', jQuery will attempt to parse the response body into a JavaScript object (or array or null). If the response body cannot be parsed (because it is not valid JSON), jQuery will call the error callback, rather than the success callback.

An empty response body is not valid JSON. You must at least return "null". Or if you do not plan on returning any data, just change to dataType: 'text'.