Ajax отправка JSON

(3 оценок, среднее: 3,67 из 5)
Загрузка...

Как отправить Ajax’ом список объектов (List) в JSON формате

Пример 1

$(document).ready(function () {
   $('body').on('click', 'button[name="AddProduct"]', function () {
      var product = JSON.stringify({
          'Name': $('textarea[name="productName"]').val(),
          'Cost': $('input[name="productCost"]').val(),
      });
 
      console.log(product);
      
      $.ajax({
           url: "/Products/AjaxCreate/",
           method: "POST",
           contentType: 'application/json',
           data: product,
           success: function (response) {
		 
                 console.log(response);
	   
           }
      });
   });
});

Контроллер

public ActionResult AjaxCreate(Product product){
     return Json(new { result = "success" }, JsonRequestBehavior.AllowGet);
}

 

Пример 2

//Сохранение накладной
$('body').on('click', 'button[name="SaveInvoiceBill"]', function () {
//Соберем таблицу как массив объектов
var billDetails = [];
$('.item').each(function () {
   var name = $(this).find('.name').val();  //Название
   var quantity = parseInt($(this).find('.quantity').val()); //Количество
   var price = parseFloat($(this).find('.price').val());//Цена
   var summ = parseFloat($(this).find('.item-summ').attr('value'));//Сумма
   var productId = parseFloat($(this).find('.item-id').attr('value'));//Id Товара
   var productSkuId = parseInt($(this).find('.item-sku-id').attr('value'));//Id Торгового предложения Товара
   var notRec = $(this).find('.item-not-rec').prop('checked');//Учитывать товар или нет
 
 billDetails.push({ Name: name,
                    Quantity: quantity,
                    Price: price,
                    Summ: summ,
                    ProductId: productId,
                    ProductSkuId: productSkuId,
                    NotRec: notRec });
 });
 console.log(billDetails);
 billDetails = JSON.stringify({ 'billDetails': billDetails }); //Превратим в Стетхема
 
 //Отправим  на сохранение
 $.ajax({
	url: "/Bills/AjaxSaveInvoiceBill/",
	method: "POST",
	contentType: 'application/json',
	data: billDetails,
	success: function (response) {
		window.location.replace("/Bills/List/");
	}
 });

return false;
});

Контроллер

[HttpPost]

public ActionResult AjaxSaveInvoiceBill(List<BillDetail> billDetails){

   if (billDetails.Count == 0) return Json(new { result = "error", message = "В накладной нет товаров" }, JsonRequestBehavior.AllowGet);
   //Создадим новую приходную накладную, получим ее ID
   long billId = Bill.CreateBill(BillTypes.Invoice);
   //Теперь сохраним каждую позицию под ID новой накладной
   BillDetail.SaveBillDetails(billDetails, billId);
   return Json(new { result="success", message="Накладная успешно создана" }, JsonRequestBehavior.AllowGet);

}

Ajax запрос в контроллер и получение Json ответа

 

$(document).ready(function () {
	
   $.ajax({
      url: "/Suppliers/AjaxGetSuppliersList/",
      method: "GET",
      success: function (response) {
          data = JSON.stringify(response.suppliers);
          var list = eval("(" + data + ")");
          suggest_count = list.length;
          if (suggest_count > 0) {
              $('.supplier-select').empty();//Очистим список элементов
              //полученный список элементов добавим в селект
              $.each(response.suppliers, function (key, value) {
                        $('.supplier-select').append('<option value="' + value.Id + '">' + value.Name + '</option>');
              });
          }
      }
   });
});

Контроллер

[HttpGet]
public ActionResult AjaxGetSuppliersList()
{
	List suppliers = Supplier.GetSuppliers();
	return Json(new { suppliers }, JsonRequestBehavior.AllowGet);
}