Ajax send data Json type error

Question

I want to submit Form ajax with jsontype

Let say I have 5 Field in that text box out of 5, 4 textbox normal Text one field value itself json so that ajax throw the error. How i can send

[![enter image description here][1]][1]

my.js

function _getTest(){
                var data = JSON.stringify($("#formId").serialize());
               //alert(data); 
                $.ajax({
                url: "domain.com",
                datatype: 'json',
                type: "POST",
                contentType: 'application/json',
                data: data,              
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(result) {
                        alert(result.responseText);
                    }
                });
            }

After Submit form i got status this Status Code:400 Bad Request

General Tab Request URL:http://mycustomurl/com Request Method:POST Status Code:400 Bad Request Remote Address:35.154.113.130:8080 Referrer Policy:no-referrer-when-downgrade

[![enter image description here][2]][2]

Expected Payload

{
    "name": "user",
    "mobile": "1234567890",
    "email": "my@gmail.com",
    "address": "test",
    "localityID": 1,
    "cityID": 1,
    "bookingDate": "2017-12-20",
    "timingID": "1",
    "paymentType": 1,
    "affiliateID": 15,
    "key": "test",
    "password": "test",
    "orderItems": [{
        "id": 3,
        "quantity": 2
           }, {
        "id": 4,
        "quantity": 5
    }]
}

Answer 1

Based on my understanding I have created below logic to create your payload. This code create exact structure you want to send as payload. In my code I have created mainData array to create payload. In your case you need to pass this mainData as your ajax payload data. Hopefully this will solve your problem

var mainData={};

$(document).ready(function(){

   $("#submit").click(function(){

    mainData='{'+'\n'+
    '"name":'+ $("#name").val()+',\n'+
    '"mobile": '+$("#mobile").val()+',\n'+
    '"email": '+$("#email").val()+',\n'+
    '"address": '+$("#address").val()+',\n'+
    '"localityID": '+$("#localityID").val()+',\n'+
    '"cityID": '+$("#cityID").val()+',\n'+
    '"bookingDate":'+$("#bookingDate").val()+',\n'+
    '"timingID": '+$("#timingID").val()+',\n'+
    '"paymentType":'+$("#paymentType").val()+',\n'+
    '"affiliateID": '+$("#affiliateID").val()+',\n'+
    '"key": '+$("#key").val()+',\n'+
    '"password":'+$("#password").val()+',\n'+
    '"orderItems": '+$("#orderItems").val()+'\n'+
   ' });';
   console.log("mainData=");
   console.log(mainData);



		});
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<input type="text" id="name" placeholder="Name"/>
<input type="number" id="mobile" placeholder="Mobile"/>
<input type="text" id="email" placeholder="Email"/>
<input type="text" id="address" placeholder="address"/>
<input type="text" id="cityID" placeholder="City ID"/>
<input type="text" id="localityID" placeholder="Locality ID"/>
<input type="date" id="bookingDate" placeholder="Booking Date"/>
<input type="text" id="timingID" placeholder="Timing ID"/>
<input type="text" id="paymentType" placeholder="Payment Type"/>
<input type="text" id="affiliateID" placeholder="Affiliate ID"/>
<input type="text" id="key" placeholder="Key"/>
<input type="password" id="password" placeholder="Password"/>
<textarea type="text" id="orderItems" placeholder="order Items"></textarea>
<input type="submit" id="submit" />

After created payload from above code you can pass payload in your ajax as follows

function _getTest(){
                $.ajax({
                url: "domain.com",
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(mainData),              
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(result) {
                        alert(result.responseText);
                    }
                });
            }

I am also attaching output screenshot for the same