Javascript 类构造函数不工作

Question

我刚刚创建的表单根据用户的选择动态生成输入组。提交表单后，我将尝试创建一个 JSON 字符串，稍后将其发送到 php 文件。

我注意到两个类构造函数(函数元素、函数路由)有问题......它们没有获取所有属性的值。

但是(我不知道如何)，该值稍后显示在 JSON 字符串中。

为了允许您调试，我已将文件上传到我的服务器上。 我无法在 jsfiddle 上运行。

这是网址: http://www.alessandrocuria.com/tmp/

这是代码

    <form action="" method="post" enctype="multipart/form-data" id="custom-route-form" class="main-form">
        <div id="book_car" class="title-form current">
                    <span>

                    </span>
        </div>
        <div id="message-custom-route"></div>
        <div id="book_car_content" class="content-form">
            <div class="form-block custom-form-block">
                <h4>Origin</h4>
                <input id="new-route-origin" class="shortcode_input" type="text" value="" name="origine">
            </div>

            <div class="form-block custom-form-block">
                <h4>Destination</h4>
                <input id="new-route-destination" class="shortcode_input" type="text" value="" name="destinazione">
            </div>

            <div class="form-block">
                <h4>How many box do you want to create?</h4>
                <div class="">
                    <select id="n_fasce" class="select" name="">
                        <option value="">- seleziona -</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                    </select>
                </div>
            </div>


            <div class="clear"></div>


            <div id="price-wrap"></div>


            <div class="form-block custom-form-block submit-costum">
                <input id="custom-route-submit" name="modifica" type="submit" class="blue_button form-book" value="Prenota">
                <!--<input id="custom-route-submit" class="blue_button form-book" type="submit" value="Continue">-->
            </div>


            <div class="clear"></div>

        </div>
        <div class="clear"></div>
    </form>
</div>






$(document).on("ready", function(){

    if($('#private-home').length>0){
        loadData();
    }

    function loadData(){
        $("#ajaxLoader").show();
        $.ajax({
            type:"POST",
            url:"getItinerari.php"
        }).done(function(itinerario_out){
            console.log(itinerario_out);
            var route = JSON.parse(itinerario_out);
            for(var i in route){
                var sortableDiv = '<li id="" class="ui-state-default" style="">'+ route[i].itinerario +'<a href="edit.php?id='+ route[i].it_id +'"><img src="../images/file_edit.png" alt="Modifica" width="35px" height="auto"></a><a onclick="return deleteConferme();" href="delete.php?it_id='+ route[i].it_id +'"><img src="../images/delete.png" alt="Elimina" width="35px" height="auto"></a></li>';
                $("#sortable").append(sortableDiv);

            }
            $("#ajaxLoader").hide();
        });
    }



    function deleteConferme() {
        var result = confirm("Sicuro di voler eliminare questo itinerario?");
        if (!result) {
            return false;
        }
    }



    /*****/

    var n_fasce;
    var El_fasce = $('#n_fasce');
    var fasce = [];
    var nameRadio;

    var elHtml =
    '<div class="price-box">'+
        '<h3>Fascia di prezzo</h3>'+
    '<div>'+

    '<input class="" id="fascia_assoluta" name="range_type" value="assoluta" type="radio">'+
        '<label for="fascia_assoluta">Prezzo Assoluto</label><br>'+

    '<input class="" id="fascia_progressiva" name="range_type" value="progressiva" type="radio">'+
        '<label for="fascia_progressiva">Prezzo Progressivo</label>'+
    '</div>'+

    '<div>'+

    '<div class="form-block">'+
        '<h4>DA:</h4>'+
    '<div class="form-block">'+
    '<label>DA:</label>'+
    '<input class="pax_from" type="text">'+
    '</div>'+
        '</div>'+


        '<div class="form-block">'+
        '<label>A:</label>'+
        '<input class="pax_to" type="text">'+
        '</div>'+

    '<div class="form-block">'+
    '<label>Prezzo:</label>'+
    '<input class="price" type="text">'+
    '</div>'+

        '</div>'+
        '</div>';





    $(El_fasce).on('change', function () {

        n_fasce = El_fasce.val();

        $('#price-wrap').html('');

        for(i=0; i<n_fasce; i++){

            var newEle = document.createElement("div");
            newEle.setAttribute("id","element"+i);
            newEle.setAttribute("class","item");
            //newEle.html("<div class='itemCounter'>"+(i+1)+"</div>"+htmlEl);
            newEle.innerHTML = elHtml;
            $("#price-wrap").append(newEle);

            $('#element'+i+' input:radio').each(function (index) {
                //array[index] = $(this).attr('id');
                $(this).attr('name', 'range_type'+i);

            });

            $('.price').attr('class', 'price'+i);
            $('.pax_to').attr('class', 'pax_to'+i);
            $('.pax_from').attr('class', 'pax_from'+i);

        }

    });

    /*****/





    $('#custom-route-submit').click(function () {



        for(j=0; j<n_fasce; j++){



            var price = $('.price'+j+'').val();
            var pax_from =  $('.pax_from'+j+'').val();
            var pax_to =  $('.pax_to'+j+'').val();
            var route_type = $('input[name="range_type'+j+'"]:checked').val();

            /*************/

            var tmpElement = new element(price, pax_from, pax_to, route_type);

            //var myJsonString = JSON.stringify(tmpElement);

            fasce.push(tmpElement);


        }


        function element(price, pax_from, pax_to, route_type){
            this.price = price;
            this.pax_from = pax_from;
            this.pax_to = pax_to;
            this.route_type = route_type;

        }


        var origine = $('#new-route-origin').val();
        var destinazione = $('#new-route-destination').val();


        var route = new route(origine, destinazione, fasce);

        function route (origine, destinazione, fasce){
            this.origine = origine;
            this.destinazione = destinazione;
            this.fasce = fasce;
        }


        var json = JSON.stringify(route);




        $.ajax({
            type: 'POST',
            url: 'new-route.php',
            data: {'myjson': json},
            success: function(data) {
                alert(data);
                location.replace("new-route.php")
            }
        });



    });



 });

提前致谢!

Answer 1

如Evan建议，以下代码

var route = new route(origine, destinazione, fasce);

function route (origine, destinazione, fasce){
    this.origine = origine;
    this.destinazione = destinazione;
    this.fasce = fasce;
}

var json = JSON.stringify(route);

绝对等同于

var route = {
    origine: origine;
    destinazione: destinazione;
    fasce: fasce;
}

var json = JSON.stringify(route);

所以，除了整体拥塞之外，我无法理解这段代码究竟是什么让你失望:)