0

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
    }]
}
Learning
  • 75
  • 10
  • Do you have access to the server's logs? – Luca Kiebel Dec 07 '17 at 12:04
  • possible duplicates of:-[Getting 400 bad request error in Jquery Ajax POST](https://stackoverflow.com/a/16054639/4248328) – Alive to die - Anant Dec 07 '17 at 12:05
  • No this error i got in console HTTP Status 400 - type Status report message description The request sent by the client was syntactically incorrect. – Learning Dec 07 '17 at 12:05
  • @AlivetoDie--Anantsingh Please check my question that;s different this is different – Learning Dec 07 '17 at 12:08
  • 1
    @Learning that's why i din't duplicate your post, just added it as a comment – Alive to die - Anant Dec 07 '17 at 12:09
  • Can you send some prints and more info about request header, body, response etc? You can check it by clicking in the request name in network tab (chrome) – Canta Dec 07 '17 at 12:10
  • payload :: "name=name&id=1&email=my%40gmil.com&mobile=1234567890&cityID=1&localityID=1&address=1&bookingDate=2017-12-31&timingID=1&orderItems=%5B%7B%22id%22%3A%2212%22%2C%22quantity%22%3A%221%22%7D%2C%7B%22id%22%3A%2213%22%2C%22quantity%22%3A%221%22%7D%2C%7B%22id%22%3A%2214%22%2C%22quantity%22%3A%221%22%7D%5D&affiliateID=1&key=1&password=1" – Learning Dec 07 '17 at 12:14
  • datatype: 'json', to data**T**ype: 'json', – Roy Bogado Dec 07 '17 at 12:24
  • Is the last field supposed to be a string (the JSON représentation of an array, or should it actually be th array directly? In the latter case, you need to `JSON.parse` the field’s value before stringifying the whole object. – jcaron Dec 07 '17 at 12:25
  • @jcaron How to do that – Learning Dec 07 '17 at 12:26
  • @Roy Still same error only – Learning Dec 07 '17 at 12:27
  • @Learning serialize, replace orderItems with parsed version, then stringify the lot. – jcaron Dec 07 '17 at 12:28
  • Can you please update answer – Learning Dec 07 '17 at 12:31
  • show us request (headers, payload) from console->network. What's your end-point? – Paun Narcis Iulian Dec 07 '17 at 15:26
  • Check my updated question – Learning Dec 08 '17 at 04:19
  • @Learning can you please update your question by adding expected payload for hitting ajax, and also add payload generated by your code. As per my understanding it should be nested array,please update so that we can try to help you – Gauri Bhosle Dec 08 '17 at 04:32
  • @GSB Please check my updated question that's expected payload i want to send like that how i will send – Learning Dec 08 '17 at 04:36
  • @Learning ok, I understood structure of your payload. Can you please debug your code and check the generated payload by your code matches with the same structure? – Gauri Bhosle Dec 08 '17 at 04:40
  • This is my payload payload :: "name=name&id=1&email=my%40gmil.com&mobile=1234567890&cityID‌​=1&localityID=1&addr‌​ess=1&bookingDate=20‌​17-12-31&timingID=1&‌​orderItems=%5B%7B%22‌​id%22%3A%2212%22%2C%‌​22quantity%22%3A%221‌​%22%7D%2C%7B%22id%22‌​%3A%2213%22%2C%22qua‌​ntity%22%3A%221%22%7‌​D%2C%7B%22id%22%3A%2‌​214%22%2C%22quantity‌​%22%3A%221%22%7D%5D&‌​affiliateID=1&key=1&‌​password=1" – Learning Dec 08 '17 at 04:45
  • I don't know how to make that payload with mine – Learning Dec 08 '17 at 04:48
  • @Learning based on my understanding I have generated payload for you ,Please check my answer below.Hopefully it will help you – Gauri Bhosle Dec 08 '17 at 05:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160772/discussion-between-gsb-and-learning). – Gauri Bhosle Dec 08 '17 at 07:24

1 Answers1

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 enter image description here

Gauri Bhosle
  • 4,985
  • 1
  • 15
  • 19