javascript - 无法使用 jquery 从表单值发送 json 数据

Question

我正在创建一个 json 对象，在其中从表单中提取字段，然后使用 jquery Ajax POST 发送数据。但是，当我在按提交后看到我的网络选项卡时，我基本上得到了 json header ，但是除了我硬编码的值之外，应该从表单中提取的所有值都是空白的。请注意，我的 json 数据还有一个 room 类型的嵌套 json。

下面是我的 jquery 部分:-

 var formData={
        "checkInDate": $("#checkInDate").val(),
        "checkOutDate": $("#checkOutDate").val(),
        "roomsWanted":$("#roomsWanted").val(),
        "room":{
            roomType: $("input[name=roomType]:checked").val(),
            roomProperty:"non-smoking"
        }

    };
$("#checkAvailabilityForm").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: 'post',
            url: '',
            dataType: 'json',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            success: function(dataRecieved){
                var dataRecieved= $.trim(dataRecieved);
                if(dataRecieved === ''){

                }else{

                }
            }

        });
    });

Answer 1

将 formData 声明移至 .submit() 函数内。现在页面加载的方式是，var formData = ... 立即设置 formData 的值(设置为新的空表单的值)。

您的代码应如下所示:

$("#checkAvailabilityForm").submit(function(e){
    e.preventDefault();

    var formData={
        "checkInDate": $("#checkInDate").val(),
        "checkOutDate": $("#checkOutDate").val(),
        "roomsWanted":$("#roomsWanted").val(),
        "room":{
            roomType: $("input[name=roomType]:checked").val(),
            roomProperty:"non-smoking"
        }
    };

    $.ajax({
        type: 'post',
        url: '',
        dataType: 'json',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function(dataRecieved){
            var dataRecieved= $.trim(dataRecieved);
            if(dataRecieved === ''){

            }else{

            }
        }

    });
});