Question

我需要使用jQuery发布一些表单数据，并且字段输入值需要以JSON格式发布。问题是表单字段包含肯定会出现的字段：名字，姓氏和电子邮件，但是此后的字段可以是任意数字，因为表单是从GET请求构造的。通常我会做这样的事情：

var firstName = $('input[name="firstName"]').val();
var lastName = $('input[name="lastName"]').val();
var email = $('input[name="email"]').val();

data: JSON.stringify({
  "firstName": firstName,
  "lastName": lastName,
  "email": email
})

然而，这对我剩余的领域不起作用。所以理想情况下，我需要像每个函数或其他东西一样来循环这些其他问题并将此循环放入JSON.stringify但我不知道如何做到这一点。但是你可能会说为什么不用它：

$('form').serialize();

只获取所有表单数据，但问题是JSON需要采用以下格式

{
  "firstName": "string",
  "lastName": "string",
  "email": "string",
  "responses": [
    {
      "questionKey": 0, //this needs to be the ID of the input
      "responseText": "string", //this needs to the value of the input
    } //with this part of the JSON repeating for each question
  ]
}

所有这些附加字段都具有相同的输入类，因此我可以在jQuery中轻松使用它们。我真的被困住了，我真的很感激你的帮助。谢谢:)）

更新 - 以下是表单字段的示例：

<input name="firstName" id="firstName" type="text" class="known-questions">
<input name="lastName" id="lastName" type="text" class="known-questions">
<input name="email" id="email" type="email" class="known-questions">
<input name="45435345345" id="45435345345" type="text" class="unknown-questions">
<input name="43443539864" id="43443539864" type="text" class="unknown-questions">
<input name="43344243529" id="43344243529" type="text" class="unknown-questions"> //there could be any number of these 'unknown-questions' class inputs

Answer 1

完整表格序列化为所需结构：

var data ={};
$('.known-questions').each(function(){
    data[this.name] = this.value;
});

data.responses = $('.unknown-questions').map(function(){
   return {questionKey: this.id, responseText:this.value};
}).get();

var postJson = JSON.stringify(data);

的 DEMO

Answer 2

您已经说过，每个带有responses数组响应的输入元素都会共享一个类。试试这个each循环，假设unknown-questions为此类名：

var responsesArray = [];

$(".unknown-questions")
    .each(function(idx, obj)
    {
        responsesArray.push(
            {
                "questionKey" : obj.id,
                "responseText" : $(obj).val()
            });
    });

您还说过要使用jQuery发送表单数据。目前还不清楚你是想要GET还是POST，或者你是否会使用jQuery AJAX函数，但我使用jquery.get调用如上所述测试了上述内容：

$.get("https://httpbin.org/get",
    {
        "firstName" : firstName,
        "lastName" : lastName,
        "email" : email,
        "responses" : responsesArray
    });

但我不确定这是你想要的。如果你想要一个JSON字符串来捕获你可以作为单个参数发送的对象，那么：

var jsonString =
    JSON.stringify(
    {
        "firstName" : firstName,
        "lastName" : lastName,
        "email" : email,
        "responses" : responsesArray
    });

生成以下JSON结构（我插入了换行符并编写了示例表单字段和值）：

"{
    "firstName":"John",
    "lastName":"Smith",
    "email":"j.s@example.com",
    "responses":
        [
            {"questionKey":"response1", "responseText":"asdasd213"},
            {"questionKey":"response2", "responseText":"q34234234a"},
            {"questionKey":"response3", "responseText":"aaaa"},
            {"questionKey":"response4", "responseText":"bbbb"},
            {"questionKey":"response5", "responseText":"lkjlkj"}
        ]
}"

从表单发布数据，而不知道表单将有多长

2 个答案: