无法将变量传递到JavaScript中的Ajax网址中

Question

I'm basically trying to delete an item in mongodb. But I just can't seem to pass the id into the url in the ajax call. Here's my code:

$(".delete-item").on('click', function(e, id) {
              var deleteName = $('p.nameLink').text();

// Get ID first

             $.ajax({
                type: "GET",
                url: "/items",
                dataType: 'json',
            })
            .done(function(result) { 

            // searches mongodb for the clicked name and saves the result in the var     
             var newResult = $.grep(result, function(e){ return e.name === deleteName; });


              var id = newResult[0]._id;
            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
            });

// Then delete

            console.log("ID to DELETE:", id);  // I can see id

            function itemDelete(id) {

             $.ajax({
                type: 'DELETE',
                url: '/items/' + id,
                dataType: 'json',
            })
            .done(function(result) {

           console.log("ID to DELETE:", id); // Can't see the id

            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
            });

            }

            itemDelete(id); // pass the id to the function 
         });

I'm just learning at the moment, so I could be going about this the wrong way. If anyone can help me out, I'd appreciate it.

The error message is:

DELETE https://www.someplace.com/items/undefined 500 (Internal Server Error)

Answer 1

As ajax calls are asynchronous, you should call itemDelete(id) from inside the first .done callback. Try moving

itemDelete(id);

just after

var id = newResult[0]._id;

This way you will execute your second ajax call only after the first has terminated, and the id variable will be defined.

After the change your code should look like this:

$(".delete-item").on('click', function(e, id) {
    var deleteName = $('p.nameLink').text();

    $.ajax({
        type: "GET",
        url: "/items",
        dataType: 'json',
    })
    .done(function(result) { 
        var newResult = $.grep(result, function(e){ 
            return e.name === deleteName; 
        });

        var id = newResult[0]._id;
        itemDelete(id);
    })
    .fail(function (jqXHR, error, errorThrown) {
        console.log(jqXHR);
        console.log(error);
        console.log(errorThrown);
    });

    function itemDelete(id) {
        $.ajax({
            type: 'DELETE',
            url: '/items/' + id,
                dataType: 'json',
            })
            .done(function(result) {


            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
        });
    }
 });

Answer 2

This one should work for you.

$(".delete-item").on('click', function(e, id) { var deleteName = $('p.nameLink').text();

// Get ID first

         $.ajax({
            type: "GET",
            url: "/items",
            dataType: 'json',
        })
        .done(function(result) { 

        // searches mongodb for the clicked name and saves the result in the var     
         var newResult = $.grep(result, function(e){ return e.name === deleteName; });


          var id = newResult[0]._id;
          itemDelete(id); // pass the id to the function 
        })
        .fail(function (jqXHR, error, errorThrown) {
            console.log(jqXHR);
            console.log(error);
            console.log(errorThrown);
        });



        console.log("ID to DELETE:", id);  // I can see id

        function itemDelete(id) {

         $.ajax({
            type: 'DELETE',
            url: '/items/' + id,
            dataType: 'json',
        })
        .done(function(result) {

       console.log("ID to DELETE:", id); // Can't see the id

        })
        .fail(function (jqXHR, error, errorThrown) {
            console.log(jqXHR);
            console.log(error);
            console.log(errorThrown);
        });

        }


     });

Thanks

Answer 3

The undefined in https://www.someplace.com/items/undefined suggests that the id is undefined. Note that the get and delete requests happen asynchronously, so id is not guaranteed to be set when you make the delete request, since it depends on when the request completes. In other words, try deleting after you get the id. This would require you to make the DELETE request in the success callback of the GET request.

Answer 4

Please try This one

 $.ajax({
            type: 'get',
            dataType : 'html',
            url: 'your_url',
            data:{variablname:id,type:'DELETE'}
            dataType: 'json',
        })

In your url page or action get the value as its type is get so the data type will be GET

 if(isset($_GET['variablename'],$_GET['type'])){
     if($_GET['type']=='DELETE')
       delete record from database where id= $_GET['variablename']
}

I hope it will help you Thanks