javascript - Ajax发送数据Json类型错误

Question

我想使用jsontype提交表单ajax

假设我在该文本框中有 5 个字段，其中 5 个字段为 4 个文本框正常文本，其中一个字段值本身为 json，这样 ajax 就会抛出错误。我如何发送

[![在此处输入图像描述][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);
                    }
                });
            }

提交表单后，我得到的状态是状态代码:400 错误请求

常规选项卡 请求网址:http://mycustomurl/com 请求方式:POST 状态代码:400 错误请求 远程地址:35.154.113.130:8080 推荐人政策:降级时无推荐人

[![在此处输入图像描述][2]][2]

预期有效负载

{
    "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

根据我的理解，我创建了以下逻辑来创建您的有效负载。此代码创建您想要作为有效负载发送的精确结构。在我的代码中，我创建了 mainData 数组来创建有效负载。在您的情况下，您需要将此 mainData 作为您的 ajax 有效负载数据传递。希望这能解决您的问题

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" />

从上面的代码创建有效负载后，您可以按如下方式在 ajax 中传递有效负载

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);
                    }
                });
            }

我还附上了相同的输出屏幕截图