无法检索通过<form“ post”>方法

时间:2019-06-04 05:34:07

标签: javascript html forms handlebars.js web-frontend

我正在使用JSON数据(从url获取),jQuery和Handlebars包为基本的时尚网站编写前端代码。我是javascript和Handlebars的新手,这是我最初的前端开发尝试,因此我将发布此问题,因为我无法获得进一步的解决方案。

在上一个问题Why can't i iterate correctly through handlebars elements?中,我在HTML中使用x-handlebars-template作为标签。这次,我正在使用另一个名为“ template2”的模板,该模板使用x-handlebars-template2在同一HTML文件(index.html)中的另一个标签中使用,以便使用{{#each}}迭代。

链接:

在这段代码中,我试图从url中获取JSON数据,并尝试将其显示在我的购物车中(使用模式视图/弹出窗口)。如代码所示(使用JSON数据),使用“表单”创建了购物车。

<script id="cartTemp" type="text/x-handlebars-template2">


                  {{#each cart}}
                  <p id ="cartBell">
                         My Cart: <button  id = "cartBtn" class ="openBtn">
                         <img src="https://cdn2.iconfinder.com/data/icons/web/512/Shopping_Cart-512.png" style="max-height:25px;" />
                         </button>  My Total : $
                  </p>

                      <!-- The Modal -->
                      <div class="modal2" id="myModal2">
                          <!-- Modal content -->
                          <div class="modal-content2">
                              <span class="closeBtn" id="close2">&times;</span>
                              <h2>Cart Items</h2>

                              <table id="cartTable">
                                  <tr>
                                      <th>Product ID</th>
                                      <th>Product Name</th>
                                      <th>Quantity </th>
                                      <th>Cost</th>
                                  </tr>

                                  <tr>
                                      <td>#{{id}}</td>
                                      <td>{{name}}</td>
                                      <td>{{quantity}}</td>
                                      <td>${{cost}}</td>
                                  </tr>
                              </table>
                  {{/each}}

                              <form action="/cart" method="post" >
                                  <fieldset>
                                      <legend>This form will update the cart with a given product id, or remove if quantity=0</legend>
                                      <ul>
                                          <li>Product: <input type="number" name="productid"></li>
                                          <li>Quantity: <input type="number" name="quantity"></li>
                                          <li><input type="submit"></li>
                                      </ul>
                                      <input type="hidden" name="update" value="1">
                                  </fieldset>
                              </form>
                          </div>
                      </div>


</script>

这是我的.js文件 我在哪里获取在'/ cart'中创建的JSON数据并对其进行解析。

var myRequest2 = new XMLHttpRequest()
    myRequest2.open('GET' , 'http://127.0.0.1:8010/cart' )

    myRequest2.onload = function() {

            var myData2 = JSON.parse(myRequest2.responseText)

            createCart(myData2)


                  var cartBtnEls = document.getElementsByClassName("openBtn")
                  var closeBtnEls = document.getElementsByClassName("closeBtn")[0]

                    cartBtnEls.onclick = function(){

                     var modal2 = document.getElementById("myModal2")
                      modal2.style.display = "block"
                    }

                    closeBtnEls.onclick = function(){

                     var modal2 = document.getElementById("myModal2")
                      modal2.style.display = "none"
                    }
    }
            myRequest2.send()

当我单击“ cartBtn”时,我希望看到我添加到购物车中的所有项目,但我只能看到第一个项目。为什么迭代不遍历购物车中添加的所有项目?

我尝试通过给其数量= 0删除显示的任何物品。然后出现我添加到购物车的第二个物品。

,是否可以将购物车中的商品总数显示在某处? (也许计算迭代次数,但是如何计算?)

任何可能的解决方案?预先感谢!

0 个答案:

没有答案