This article will explain jquery ajax get and post method and also how to make ajax httpGet request with url parameter.
1. Below is a simple jquery script to call REST api using get method.
$.ajax({ url: "/Home/GetItem", cache: false, type: "GET", dataType: "json", success: function (response) { if (response) { //display items in html } }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } });
MVC Controller Method:
[HttpGet] public JsonResult GetItems() { var dbItems = db.Items.ToList(); return Json(new { Items = dbItems }); }
2. JQuery ajax get method passing url param, item id. Note we have added dataType as 'json' in the below ajax method to get response in json format.
var data = { id: id }; $.ajax({ url: "/Home/GetItem", cache: false, type: "GET", data: data, dataType: "json", success: function (response) { if (response) { //display current item. } }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } });
Controller method: While making ajax request with parameter as string or integer id, parameter name 'id' must be of same case as it is case sensitive you might not get value.
[HttpGet] public JsonResult GetItem(int id) { var dbItem = db.Items.Where(b => b.Id == id).FirstOrDefault(); return Json(new { Item = dbItem }); }
3. JQuery ajax post method, add content-type as 'application/json; charset=utf-8;' and stringify data while sending ajax request using JSON.stringify().
var data = { "ItemName": $('#ItemName').val() } $.ajax({ url: "/Home/SaveItem", type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify({ "item": data}, dataType: "json", success: function (response) { if (response) { alert(response.Message ); } }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } });
MVC Controller Method:
[HttpPost] public JsonResult SaveItem(item item) { var dbItem = dbItemList.Where(c => c.Id == item.Id).FirstOrDefault(); if (dbItem == null) { item.UserName = User.Identity.Name; db.Items.Add(item); errorMessage = "Add Item successfully."; status = true; } else if (dbItem != null) { dbItem.ItemName = item.ItemName; errorMessage = "Update Item successfully."; status = true; } db.SaveChanges(); return Json(new { Valid = status, Message = errorMessage }); }