无法使用ajax调用函数

Question

I'm trying to call a function using ajax, but it's not responding.

Here is the Code:

<p id="myElem" class="alert-danger" style="display:none"></p>

<button title="Remove" data-id="@item.Book.Book_id" class="Remove btn btn-group-sm red" style="float:initial">Remove</button>

<script type="text/javascript">
    $('.Remove').click(function () {

        var myId = $(this).data('id');

        $.ajax({
            type: "POST",
            url: '@Url.Action("Remove", "ReadingNow")?Book_id=' + myId,
            success: function (response) {
                $('#myElem').html(response).fadeIn('slow');
                $('#myElem').delay(8000).fadeOut('slow');
            },
            failure: function (response) {

                alert("Failure");
            }
        });
    });
    </script>

and here is the function :

 public class ReadingNowController : Controller
{
[HttpGet]
    public ActionResult Remove(int? Book_id)
    {
        if (User.Identity.IsAuthenticated)
        {
            var x = User.Identity.GetUserId();
            var IsExists = db.ReadingNow.Where(t => t.Book_Id == Book_id && t.User_Id == x).FirstOrDefault();

            if (IsExists != null)
            {

                db.ReadingNow.Remove(IsExists);
                int state = db.SaveChanges();
                if (state == 1)
                {
                    return Content("Book Removed From Your Reading Now List !");

                }
            }                

        }
        return Content("Error !");

    }
 }

Note: When I tried to call it directly it works, but when used ajax I got no result... How can I solve this problem?

Answer 1

Ensure That jQuery Is Working

Firstly, ensure that your jQuery code is working properly and is referenced. You'll need to include a reference to the library prior to calling any jQuery-related code :

<!-- Example Reference -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
    $(function(){
          // Place your code here
    });
</script> 

If you want to perform a GET...

You are specifying within your ajax() call that you are making a POST request via the type attribute, but your Controller Action is explicitly expecting a GET via the [HttpGet] attribute decorating your action.

You can resolve this by changing your type attribute from POST to GET (or you could remove it entirely as GET is the default):

type: "GET",

If you want to perform a POST...

Alternatively, if you want to actually perform a POST, then just keep your existing code and use the [HttpPost] attribute instead :

[HttpPost]
public ActionResult Remove(int? Book_id)
{
     // Code omitted for brevity
}