Question

我是一名初学程序员，我需要了解如何从HTML表单中获取数据并将其放入JSON文件中，但我所创建的代码为每个对象提供了不同的鬃毛在我的JSON文件中，因为一个表单不能有两个具有相同名称的输入，所以在我的表单中我使用jQuery来附加类似“问题”和“答案”输入的内容，并且用户可以插入许多问题并且他们都像question1，question2 ......我希望它是JSON文件中的一系列问题，而不是单个对象（不知道是否清楚）

我有什么

{
"_method":"PUT",
"_token":"4EnPNxmaVmVdXnuYwxzLzWP06mMK7phHJMBJMt3v",
"2tipo":"discursiva",
"2enunciado":"teste pergunta discursiva",
"2resposta":"",
"3tipo":"objetiva",
"3enunciado":"teste pergunta objetiva",
"3alternativa2checkbox":"on",
"3alternativa2texto":"teste alternativa",
"3alternativa1checkbox":"on",
"3alternativa1texto":"teste alternativa"
}

我希望如何：

{
"_method":"PUT",
"_token":"4EnPNxmaVmVdXnuYwxzLzWP06mMK7phHJMBJMt3v",
"question":[
    {
    "type":"discursiva",
    "quest":"teste pergunta discursiva",
    "ans":""
    },
    {
    "type":"objetiva",
    "quest":"teste pergunta objetiva",
    "ans":[
        {
        "alt":"on",
        "txt":"teste alternativa"
        }
        {
        "alt":"on",
        "txt":"teste alternativa"
        }]
    }]
}

这是我的JS档案：

    /**
     * Created by paulo on 11/10/15.
     */
        var cont = 1;

    //this is wrong I know
    var contAlt = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];



function createQuest(){
    if(document.getElementById('discursiva').checked) {

            var appd = $('<div class="q'+cont+'"><div class="form-group"><input type="hidden" name="'+cont+'tipo" value="discursiva"><label>Questão '+cont+' -</label><input type="text" class="form-control" name="'+cont+'enunciado"><button type="button" class="btn btn-default" onclick="delQuest('+cont+')" >Remover pergunta</button><input type="hidden" name="'+cont+'resposta" value=""></div>');
            $(".quest").append(appd);
            cont++;

        }


        else if(document.getElementById('objetiva').checked) {

            var appd = $('<div class="q'+cont+'"><div class="form-group"><input type="hidden" name="'+cont+'tipo" value="objetiva"><label>Questão '+cont+' -</label><input type="text" class="form-control" name="'+cont+'enunciado"><button type="button" class="btn btn-default" onclick="delQuest('+cont+')" >Remover pergunta</button><button type="button" class="btn btn-default" onclick="addAlt('+cont+')" >Adicionar alternativa</button><div class="checkbox'+cont+'"><label><input type="checkbox" name="'+cont+'alternativa1checkbox"> Alternativa 1 </label><input type="text" class="form-control" name="'+cont+'alternativa1texto"></div></div>');
            $(".quest").append(appd);
            cont++;

        }


    }

    var del = 0;
    function delQuest(del) {

        var toDel = (".q" + del);
        $(toDel).remove();

    }


    function addAlt(add){

        contAlt[add]++;
        var appd = $('<div class="checkbox'+contAlt[add]+'"><label><input name="'+add+'alternativa'+contAlt[add]+'checkbox"type="checkbox"> Alternativa '+contAlt[add]+'</label><input type="text" class="form-control" name="'+add+'alternativa'+contAlt[add]+'texto"><button type="button" class="btn btn-default" onclick="delAlt('+contAlt[add]+')" >Remover alternativa</button></div>');
        var classe = (".checkbox"+add);
        $(classe).prepend(appd);

    }


    function delAlt(del){

        var toDel = (".checkbox" + del);
        $(toDel).remove();

    }

这就是php（我正在使用laravel，btw）：

@extends('layouts.master')
@section('title')
    Criar novo sol
@stop
@section('script')
    <link rel="stylesheet" href="../../css/styleForm.css">
@stop

@section('div1')


{!! $id !!}



    {{--seleciona o tipo de questão--}}
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="discursiva" value="option1" checked>
            Discursiva
        </label>
        <label>
            <input type="radio" name="optionsRadios" id="objetiva" value="option2">
            Objetiva
        </label>
    </div>

    <button class="btn btn-default" onclick="createQuest()" >Nova</button>


    {{--formulário aram--}}

    {!!Form::open(array('url'=>'new/'.$id, 'method' => 'PUT'))!!}

    <div class="quest">



    </div>
    {{--enviar--}}
    <p>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk"></span>  Salvar</button>
    </p>

    {!!Form::close()!!}


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

    <script src="../../js/indexForm.js"></script>
    <script src="../../js/questionnaire.js"></script>

@stop

Answer 1

jquery选择器将帮助您：

questions = [];
$(".quest > div[class^='q']").each(function(){
    var type = $(this).find("input[name$='tipo'").val();
    var quest = $(this).find("input[name$='enunciado'").val()
    var ans = [];
    $(this).find("div[class^='checkbox']").each(function(){
        var that = this;
        var check =  $(that).find("input[name$='checkbox']").val();
        var text = $(that).find("input[name$='texto']").val();
        ans.push({"alt": check, "txt": text});
    });

    questions.push({"type": type, "quest": quest, "ans": ans});

});

如何组织从HTML表单中获取的数据来制作JSON？

1 个答案: