AJAX JSON API İstek Gönderme

Selamlar,

Sipariş formu için birden fazla ürün bilgisini json formatta API'ye göndermeye çalışıyorum. Aşağıdaki form örneğini kullanıyorum. Bir türlü istenen formatta json istek gönderemedim. Son çare bir konu oluşturmak işi bilenlerden akıl almak kaldı :)

Form:

<form class="sendRequestForm mt-4" enctype="multipart/form-data">

<div class="row">

<div class="col-lg-6 col-md-6 col-xs-12 form-group">

<div class="form-item">

<input type="text" name="title" class="form-control" placeholder="Başlık" value="">

</div>

</div>

</div>

<div class="row">

<div class="col-md-6">

<div class="form-item">

<input type="text" name="title[]" class="form-control" placeholder="Ürün Adı">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="quantity[]" class="form-control" placeholder="Adet">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="unitPrice[]" class="form-control" placeholder="Birim Fiyat">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="totalPrice[]" class="form-control" placeholder="Toplam Fiyat">

</div>

</div>

</div>

<div class="row">

<div class="col-md-6">

<div class="form-item">

<input type="text" name="title[]" class="form-control" placeholder="Ürün Adı">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="quantity[]" class="form-control" placeholder="Adet">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="unitPrice[]" class="form-control" placeholder="Birim Fiyat">

</div>

</div>

<div class="col-md-2">

<div class="form-item">

<input type="text" name="totalPrice[]" class="form-control" placeholder="Toplam Fiyat">

</div>

</div>

</div>

<div class="row">

<div class="col-md-12 mt-4">

<div class="form-item">

<button type="button" class="btn btn-primary sendRequest" trnForm="sendRequestForm" trnAction="/requests/" trnMethod="POST">

Kaydet

</button>

</div>

</div>

</div>

</form>

İletmem gereken JSON Veri örneği:

var data =

{

 "title":"Teklif Başlık",

 "products":

{

 "items": 

 [

 {

"title": "Salatalık",

"quantity": "65",

"unitPrice": "65",

"totalPrice": "65"

 },

 {

"title": "Sivri Biber",

"quantity": "45",

"unitPrice": "45",

"totalPrice": "45"

 },

 {

"title": "Salkım Domates",

"quantity": "75",

"unitPrice": "75",

"totalPrice": "75"

 }

 ]

}

};

<script>

$(document).ready(function()

{

$("body").on( "click", ".sendRequest", function()

{

var trnForm = $(this).attr('trnForm');

var trnAction = $(this).attr('trnAction');

var trnMethod = $(this).attr('trnMethod');

if(typeof trnForm === "undefined" || trnForm=="")

{

alert("Hata! Form bulunamadı.");

}

else

{

trnForm = "."+trnForm;

$.ajax({

url: trnAction,

type: trnMethod,

data: JSON.stringify($(trnForm).serializeArray()),

dataType: "json",

contentType: "application/json",

success: function (trnData)

{

console.log(trnData);

}

});

}

});

});

</script>

data: JSON.stringify($(trnForm).serializeArray()),

yerine

data: $(trnForm).serializeArray(),

şeklinde yazarak post ettiğiniz yerden almaya çalışın.

bu tür şeyleri chatgpt'ye sor. ben web yazılımcısı değilim ama bazen e-fatura ya da bir web servisi falan için xml, xslt vs.. bir kaç satırlık işler çıkıyor. chatgpt işimi görüyor. bu tür konularda fena değil. hata falan yapıyor, söylüyorum, onu da düzeltiyor.