如何在没有ajax调用的情况下从jquery中的函数返回json对象？答案

【问题标题】：How to return a json object from a function in jquery with no ajax call?如何在没有ajax调用的情况下从jquery中的函数返回json对象？
【发布时间】：2018-01-28 15:44:26
【问题描述】：

所以我正在尝试制作一个 Web 应用程序，其中我需要在确认对话框（）上显示购物车的详细信息，但我无法存储变量，因为它是异步函数调用。所以我尝试使用函数回调，但没有突破。请帮助如何将数据从函数 getValueUsingClass() 获取到 cart_items 中。

创建了一个延迟对象，但我不知道如何使用它。非常需要帮助。我对此感到非常沮丧。所以请帮忙，提前谢谢

//this is client.js


    $(document).ready(function () {
        var dfd = $.Deferred();
        var cart_items = [
      //this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
        ];


        //collecting the items into a json object to send to the server 
        $(".checkboxlist").click(function () {
            cart_items = (getValueUsingClass());
            console.log(cart_items);
        })


    //function to store the values in cart_items but not able to store
        function getValueUsingClass(setValue) {
            /* declare a checkbox array */
            var chkArray = [];
            /* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
            $(".checkboxlist:checked").each(function () {
                var element = this;
                var cart_item = {
                    id: this.id,
                    item: this.name,
                    cost: Number(this.value),
                    quantity: 1
                }
                chkArray.push(cart_item);
                setValue(cart_items);//tried to use this as a callback function
            })

            /* we join the array separated by the comma */
            function setValue(cart_items) {
                cart_items = chkArray;
                console.log("hell" + cart_items[0].id);
            }

            /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */

plate is the cart for this, I am using local variable chkArray to store the print the data on the cart

            $(".plate").on('click', function () {
                $('.plate_items').html(" ");
                console.log(cart_items[0].id);
                for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
                    $('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
                }
            });

            return chkArray;
        }

        $('.proceed_btn').on('click', function () {
            console.log("hello");
            console.log(cart_items);
            let details = [{
                name: $('#name').val(),
                email: $('#email').val(),
                empid: $('#empid').val()
            }]
            console.log(details[0].name + details[0].email + details[0].empid);
            cart_items = cart_items.concat(details);


        })
    })

//this is index.html
    <html>
    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <header>
        <div class="container-fluid header">
            <span class="main_title" style="float:left">Eatachi</span>
            <nav class="nav navigation">
            </nav>
        </div>
    </header>

    <body>
        <div class="container">

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg plate" data-toggle="modal" data-target="#myModal">Plate</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <form>
                                <div class="form-group">
                                    <label for="name">Name:</label>
                                    <input type="text" class="form-control" id="name">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email ID:</label>
                                    <input type="email" class="form-control" id="email">
                                </div>
                                <div class="form-group">
                                    <label for="empid">Employee ID:</label>
                                    <input type="text" class="form-control" id="empid">
                                </div>
                                <h4 class="modal-title">Cart Details</h4>
                        </div>
                        <div class="modal-body plate_items">
                            <p>Some text in the modal.</p>
                            <ul class="list-group">

                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success proceed_btn">Proceed to payment</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-1">
                </div>
                <div class="col-lg-10">
                    <div class="col-lg-4">
                        <header>
                            <h3>Veg Alacarte</h3>
                        </header>
                        <article class="well well-lg">


                            <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
                                        <img class="img-thumbnail news-pic center-block" src="imgs/1.jpg" />
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="14" type="checkbox" value="50"> Veg Fried Rice Rs.50</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="15" type="checkbox" value="60"> Veg Biryani Rs.60</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="16" type="checkbox" value="70"> Paneer Fried Rice Rs.70</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="17" type="checkbox" value="50"> Veg Noodles Rs.50</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="18" type="checkbox" value="35"> Curd Rice Rs.35</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="19" type="checkbox" value="35"> Sambar Rice Rs.35</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="20" type="checkbox" value="35"> Veg Pulao Rs.35</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="21" type="checkbox" value="35"> Lemon Rice Rs.35</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="22" type="checkbox" value="15"> Veg Curry Rs.15</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="23" type="checkbox" value="10"> Curd Rs.10</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="24" type="checkbox" value="10"> Dal Rs.10</li>

                                </ul>

                            </div>
                            <ul class="list-group">

                            </ul>
                        </article>

                    </div>

                    <div class=" col-lg-4">
                        <header>
                            <h3>Diet</h3>
                        </header>
                        <article class="well well-lg">


                            <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" href="#dietList" aria-expanded="false" aria-controls="collapseListGroup1">
                                        <img class="img-thumbnail news-pic center-block" src="imgs/2.jpg" />
                                    </a>
                                </h4>
                            </div>
                            <div id="dietList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="25" type="checkbox" value="50"> North Diet Rs.50</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="26" type="checkbox" value="50"> South Diet Rs.50</li>
                                    <li class="list-group-item">
                                        <input type="checkbox" class="checkboxlist" id="27" type="checkbox" value="70"> South Diet Royal Rs.70</li>
                                </ul>
                            </div>
                            <ul class="list-group">

                            </ul>
                        </article>


                    </div>

                    <div class=" col-lg-4">
                        <header>
                            <h3>Non Veg Alacarte</h3>
                        </header>
                        <article class="well well-lg">


                            <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" href="#nonVegList" aria-expanded="false" aria-controls="collapseListGroup1">
                                        <img class="img-thumbnail news-pic center-block" src="imgs/3.jpg" />
                                    </a>
                                </h4>
                            </div>
                            <div id="nonVegList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="1" type="checkbox" value="130"> Chicken Biryani Rs.130</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="2" type="checkbox" value="130"> Fish Biryani- Rs.130</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="3" type="checkbox" value="130"> Prawn65 Biryani Rs.130</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="4" type="checkbox" value="100"> Chicken Dum Biryani Rs.100</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="5" type="checkbox" value="110"> Chicken Roast Biryani Rs.110</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="6" type="checkbox" value="120"> Chicken Boneless Biryani Rs.120</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="7" type="checkbox" value="70"> Egg Biryani Rs.70</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="8" type="checkbox" value="60"> Egg Curry with Roti Rs.60</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="9" type="checkbox" value="80"> Egg Curry with Paratha Rs.80</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="10" type="checkbox" value="70"> Chicken Fried Rice Rs.70</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="11" type="checkbox" value="70"> Chicken Noodles Rs.70</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="12" type="checkbox" value="60"> Egg Fried Rice Rs.60</li>
                                    <li class="list-group-item">
                                        <input class="checkboxlist" id="13" type="checkbox" value="60"> Egg Noodles Rs.60</li>



                                </ul>

                            </div>
                            <ul class="list-group">

                            </ul>
                        </article>


                    </div>
                </div>
                <div class="col-lg-1">

                </div>
            </div>
        </div>


        <div class="footer">

            <div class="copyright">
                <span id="copyright-year">©2018</span>

            </div>

        </div>


    </body>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="scripts/client.js"></script>


    </html>

<!-- end snippet -->

【问题讨论】：

你的代码没有什么是异步的。为什么你认为你需要使用 Deferred 对象？
因为 cart_items 没有被填充
如果它不是异步的，为什么即使在返回值之后变量也没有任何细节
除了proceed_btn 点击处理程序中的details 对象外，您永远不会将任何数据放入cart_items。看到一个这样的工作示例真的很有帮助，因为您的代码似乎相当脱节

标签： javascript jquery html json callback

【解决方案1】：

javascript 中的异步调用不会立即为您返回答案，但它会向您返回一个承诺，最终它将为您提供您期望的答案。通常，promise 有一个then 方法，它是一个回调函数，当它准备好时，promise 会公开它来访问数据。所以，关键是您可以在then 方法中使用您的数据。如需更详细的参考，请转至here。

【讨论】：

Promise 可以在 URL 调用之外使用吗？

【解决方案2】：

实际上，问题不在于任何函数回调或异步，我为 cart_items 设置的值应该使用 push() 方法传递，而不是直接分配。

 $(document).ready(function () {
        var dfd = $.Deferred();
        var cart_items = [
      //this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
        ];


        //collecting the items into a json object to send to the server 
        $(".checkboxlist").click(function () {
            cart_items = (getValueUsingClass());
            console.log(cart_items);
        })


    //function to store the values in cart_items but not able to store
        function getValueUsingClass(setValue) {
            /* declare a checkbox array */
            var chkArray = [];
            /* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
            $(".checkboxlist:checked").each(function () {
                var element = this;
                var cart_item = {
                    id: this.id,
                    item: this.name,
                    cost: Number(this.value),
                    quantity: 1
                }
                chkArray.push(cart_item);
                setValue(cart_items);//tried to use this as a callback function
            })

            /* we join the array separated by the comma */
            function setValue(cart_items) {
                //cart_items = chkArray; this is the mistake
                 cart_items.push(chkArray);//this is the correct way because I am passing the reference but the following array will not accept the reference as a value.
                console.log("hell" + cart_items[0].id);
            }

            /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */

plate is the cart for this, I am using local variable chkArray to store the print the data on the cart

            $(".plate").on('click', function () {
                $('.plate_items').html(" ");
                console.log(cart_items[0].id);
                for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
                    $('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
                }
            });

            return chkArray;
        }

        $('.proceed_btn').on('click', function () {
            console.log("hello");
            console.log(cart_items);
            let details = [{
                name: $('#name').val(),
                email: $('#email').val(),
                empid: $('#empid').val()
            }]
            console.log(details[0].name + details[0].email + details[0].empid);
            cart_items = cart_items.concat(details);


        })
    })

【讨论】：