如何组织从 HTML 表单获得的数据以生成 JSON

How can I organize data that I got from an HTML form to make a JSON?

本文关键字:数据 JSON 何组织 HTML 表单      更新时间:2023-09-26

我是一名初学者程序员,我需要了解如何从 HTML 表单获取数据并将其放入 JSON 文件中,但我制作的代码为我的 JSON 文件中的每个对象提供了不同的鬃毛,因为表单不能有两个同名的输入,碰巧在我的表单中,我使用 jQuery 附加类似于"问题"和"答案"输入的内容,用户可以插入许多问题,它们都像问题 1、问题 2...我希望它是 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",
    "answers":""
    },
    {
    "type":"objetiva",
    "quest":"teste pergunta objetiva",
    "answers":[
        {
        "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,顺便说一句(:

@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

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, "answers": ans});
});