创建具有AJAX，HTML5和jQuery一车系统只有

我需要创建与HTML5，AJAX和JQuery只有车系统，并且不需要任何服务器端脚本语言（PHP，ASP.NET等）创建具有AJAX，HTML5和jQuery一车系统只有

我的情况是：“一个HTML部门在哪里添加产品将显示，名称，价格，数量和总计等”

我不知道Jquery如何使用AJAX向产品展示Div。任何人都可以引导我，或者可以给我一个教程链接，从那里我可以清除我的概念。

2016-09-18 Mohiyo Deen

如果你需要有一些建，你应该考虑联系开发人员？这不是一个代码写入服务，而是一个当你自己的尝试失败时提出问题的地方。 – adeneo

我只是要求一个有效的教程链接，我可以从中学习和纠正我关于AJAX和Jquery的概念 –

[jQuery学习中心]（https://learn.jquery.com/）< - 要求教程也是off-堆栈溢出的主题。 – adeneo

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Shoping cart </h2> 
    <div class="row"> 
<div class="col-md-3"> 
    <div class="form-group"> 
     <img name="HP" id="imhp" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imhp');" style="cursor:pointer;"> 
    </div> 
    <div class="form-group"> 
<p>product small descriptioon</p> 
    </div> 
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(1);">Add To cart</button> 

</div> 
<div class="col-md-3"> 
    <div class="form-group"> 
     <img name="Dell" id="imdell" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imdell');" style="cursor:pointer;"> 
    </div> 
    <div class="form-group"> 
<p>product small descriptioon</p> 
    </div> 
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(2);">Add To cart</button> 

</div> 
<div class="col-md-3"> 
    <div class="form-group"> 
     <img name="sony" id="imsony" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imsony');" style="cursor:pointer;"> 
    </div> 
    <div class="form-group"> 
<p>product small descriptioon</p> 
    </div> 
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(3);">Add To cart</button> 

</div> 
    </div> 
</div> 
<div class="container"> 
<div class="jumbotron"> 
<table class="table" id="tbl"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Qty</th> 
     <th>Amount</th> 
     </tr> 
    </thead> 
    <tbody id="cartt"> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 

     </tr> 
     <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="clr();">Cancel</button> 
    </tbody> 

    </table> 
    <h3>Sum:</h3> <h2 id = "gttlsum">0</h2> 
</div> 
</div> 
</div> 

</body> 



<script> 
var gttl=0; 
var qty =0; 
var amount =0; 
var naam=''; 
var recentAdded = ''; 
//var desc=$('#imhp').attr('name'); 
function addtoCart(id){ 
{ 
if(id=='imhp'){ 
amount = amount+10; 
naam='HP'; 
} 
else if(id=='imdell'){ 
amount = amount+20; 
naam='Dell'; 
} 
else if(id=='imsony'){ 
amount = amount+30; 
naam='Sony'; 
} 

} 

qty=qty+1; 

var ele= $("#cartt"); 
gttl = parseInt($("#gttlsum").html()); 
var isContains = $('#tbl').text().indexOf(naam) > -1; 
if(!isContains) 
{ 
ele.append('<tr id="'+naam+'"><td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td></tr>'); 
gttl = gttl +amount; 
} 
else 
{ 
var tqid = '#qty'+naam; 
var taid = '#amount'+naam; 
var q = $(tqid).html(); 
var a = $(taid).html(); 
gttl = gttl +amount; 
amount = amount + parseInt(a); 
qty = qty + parseInt(q); 
var tid = '#'+naam; 
var ele= $(tid); 
if(ele.html()!='') 
{ 
ele.html(''); 
ele.append('<td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td>'); 
} 
else 
{ 
ele.append('<tr id="'+naam+'"><td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td></tr>'); 
} 
} 
$("#gttlsum").html(gttl); 
<!-- $('h1').text('NEW...'); --> 
naam=''; 
qty=0; 
amount=0; 
} 


//clear function on Cancel button 
function clr() 
{ 
qty =0; 
amount =0; 
//following line will give a blank HTML on cart DIV 
$("#cartt").html(''); 
$("#gttlsum").html(0); 
} 
</script> 





</html>

试试这个代码，并探索它

来源

2016-09-22 05:13:01 Ralis

这里是看前端点车处理程序的基本实现只用OODK-JS和jQuery

 <html> 
     <head> 
     <script src="../src/oodk.js"></script> 
     <script src="lib/jquery-1.12.0.min.js"></script> 

      <script> 

      $.noConflict(); 

      OODK.config({ 
      'path': { 
       'oodk': '../src', 
       'workspace': 'workspace' 
      } 
      }); 

      OODK(function($, _){ 

      $.import('{oodk}/foundation/utility/Observable', '{oodk}/api/Iteration'); 

      // Model for Product with properties name, unit price and id 
      $.class(function ProductModel($, µ, _){ 

       $.protected('id'); 

       $.protected('name'); 

       $.protected('price'); 

       $.public(function __initialize(id, name, price){ 
       µ.id = id; 
       µ.name = name; 
       µ.price = price; 
       }); 

       $.public(function getId(){ 
       return µ.id; 
       }); 

       $.public(function getName(){ 
       return µ.name; 
       }); 

       $.public(function getPrice(){ 
       return µ.price; 
       }); 
      }); 

      // Model for Cart item 
      // a cartItem is linked to the cart and the related product 
      $.extends(OODK.foundation.util.Observable).class(function CartItemModel($, µ, _){ 

       $.protected('product'); 

       $.protected('qte'); 

       $.protected('cart'); 

       $.public(function __initialize(cart, product, qte){ 
       µ.cart = cart; 
       µ.qte = qte; 
       µ.product = product; 
       }); 

       $.public(function getCart(){ 
       return µ.cart; 
       }); 

       $.public(function getProduct(){ 
       return µ.product; 
       }); 

       $.public(function setQuantity(qte){ 
       return µ.setObservableProperty('qte', qte, µ); 
       }); 

       $.public(function getQuantity(){ 
       return µ.qte; 
       }); 

       $.public(function getPrice(){ 
       return (µ.qte * µ.product.getPrice()); 
       }); 
      }); 

      // Model for Cart 
      // Cart is a collection of CartItem 
      // whenever a product is added, removed or the quantity of the item changed 
      // an event is broadcast 
      $.dynamic().implements(OODK.foundation.EventBroadcaster, OODK.foundation.EventListener, OODK.foundation.Iterable).class(function CartModel($, µ, _){ 

       // add a product to the cart with the specified quantity 
       $.public(function addProduct(product, qte){ 

       if(!$.instanceOf(product, _.ns.ProductModel)){ 
        $.throw(OODK.foundation.IllegalArgumentException, 'Cannot add product to cart - argument it is not a valid product') 
       } 

       var key = product.getId(); 

       if(!_.hasOwnProperty(key)){ 

        var cartItem = $.new(_.ns.CartItemModel, this, product, qte); 

        _[key] = cartItem; 

        var evt = µ.factoryMutableEvent('itemAdded', cartItem); 

        $.trigger(evt); 

        // listen changes made on the item 
        $.on(cartItem, 'propertyChanged', this); 
       }else{ 

        var cartItem = _[key]; 

        cartItem.setQuantity((cartItem.getQuantity()+1)); 
       } 
       }); 

       // remove a product from the cart 
       $.public(function removeProduct(product){ 

       if(!$.instanceOf(product, _.ns.ProductModel)){ 
        $.throw(OODK.foundation.IllegalArgumentException, 'Cannot remove product from cart - argument it is not a valid product') 
       } 

       var key = product.getId(); 

       if(_.hasOwnProperty(key)){ 

        var cartItem = _[key]; 

        delete _[key]; 

        var evt = µ.factoryMutableEvent('itemRemoved', cartItem); 

        $.trigger(evt); 

        // stop listening the item 
        $.off(cartItem, 'propertyChanged', this); 
       } 
       }); 

       // calculate the total price of the cart 
       $.public(function getTotalPrice(){ 

       var total = 0.0; 

       $.forEach(this, function(cartItem, k, i){ 

        if($.instanceOf(cartItem, _.ns.CartItemModel)){ 

        total += cartItem.getPrice(); 
        } 
       }); 

       return total; 
       }); 

       // factory for mutable event 
       $.protected(function factoryMutableEvent(eventType, model){ 

       var evt = $.new(_.ns.MutableEvent, eventType, this); 

       evt.setModel(model); 

       evt.sync(); 

       evt.setInterruptable(false); 

       return evt;      
       }); 

       // when one of the cartItem property change broadcast the event 
       $.public(function __processEvent(evt){ 

       var evtProxy = µ.factoryMutableEvent('propertyChanged', evt.getTarget()); 

       evtProxy.setSrcEvent(evt); 

       $.trigger(evtProxy); 
       }); 

       $.private(function __eventConsumed(evt){}); 

       $.private(function __dispatchEvent(evt){}); 

       $.private(function __approveListener(request){}); 

       $.private(function __iterator(){ 

       return $.new(OODK.foundation.util.Iterator, this); 
       }); 
      }); 

      $.extends(OODK.foundation.util.Event).class(function MutableEvent($, µ, _){ 

       $.private('model'); 

       $.public(function setModel(model){ 

        µ.testConsumed(); 

        _.model = model; 
       }); 

       $.public(function getModel(){ 
        return _.model; 
       }); 
      }); 

      // The list view displays the employees as a html table 
      $.implements(OODK.foundation.EventListener).class(function CartView($, µ, _){ 

       // called when an imte is added, removed, or one of the property of the stored model changed 
       $.private(function __processEvent(evt){ 

        var tmpl; 

        // if the view does not exists yet render it 
        if(jQuery('#cartView').size() === 0){ 

         tmpl = '<div id="cartView">'; 

         tmpl += '<h4>Cart</h4>'; 

         tmpl += '<table id="products">'; 

         tmpl += '<thead>'; 

         tmpl += '<tr><th>Product</th><th>Quantity</th><th>Price</th></tr>'; 

         tmpl += '</thead>'; 

         tmpl += '<tbody></tbody>'; 

         tmpl += '</table>'; 

         tmpl += '<p>Total price: <span class="total-price">0</span></p>'; 

         tmpl += '</div>'; 

         jQuery("#cartPlaceholder").append(tmpl); 
        } 

        if(evt.getType() === 'propertyChanged'){ 

         if(evt.getSrcEvent().getPropertyName() === 'qte'){ 

          // the quantity of a cart item product has changed 
          // update the corresponding table cell 

          jQuery('#product-'+evt.getModel().getProduct().getId()+ ' > .cart-item-qte').text(evt.getSrcEvent().getNewValue()); 

          jQuery('#cartView .total-price').text(evt.getModel().getCart().getTotalPrice().toFixed(2)); 

         } 
        }else if(evt.getType() === 'itemAdded'){ 

         // a new product is added to the cart 
         // add a line to the html table 

         tmpl = '<tr id="product-' + evt.getModel().getProduct().getId() + '">'; 

         tmpl += '<td class="cart-item-product-name">' + evt.getModel().getProduct().getName() + '</td>'; 

         tmpl += '<td class="cart-item-qte">' + evt.getModel().getQuantity() + '</td>'; 

         tmpl += '<td class="cart-item-product-price">' + evt.getModel().getProduct().getPrice().toFixed(2) + '</td>'; 

         tmpl += '<td><button class="btn-remove-cart-item">X</button></td>'; 


         tmpl += '</tr>'; 

         jQuery("#cartView > table > tbody").append(tmpl); 

         jQuery('#cartView .total-price').text(evt.getModel().getCart().getTotalPrice().toFixed(2)); 

         jQuery('#product-' + evt.getModel().getProduct().getId()).bind('click', function(e){ 

          evt.getModel().getCart().removeProduct(evt.getModel().getProduct()); 
         }); 

        }if(evt.getType() === 'itemRemoved'){ 

         // an exsiting product is removed from the cart 
         // delete the corresponding line of the html table 

         jQuery('#product-'+evt.getModel().getProduct().getId()).remove(); 

         jQuery('#cartView .total-price').text(evt.getModel().getCart().getTotalPrice().toFixed(2)); 
        } 
       }); 
      }); 

      jQuery(document).ready(function(){ 

       //instantiate products 
       var productApple = $.new(_.ProductModel, 1, "Apple", 0.10); 

       var productBanana = $.new(_.ProductModel, 2, "Banana", 0.20); 

       var productOrange = $.new(_.ProductModel, 3, "Orange", 0.30); 

       //instantiate cart 
       var cart = $.new(_.CartModel); 

       //instantiate cart view 
       var cartView = $.new(_.CartView); 

       // bind cart model and view 
       $.on(cart, 'itemAdded', cartView); 

       $.on(cart, 'itemRemoved', cartView); 

       $.on(cart, 'propertyChanged', cartView); 

       // add a default product to the cart 
       cart.addProduct(productBanana, 2); 

       // bind button listeners 
       jQuery('#addBananaToCart').bind('click', function(evt){ 

        cart.addProduct(productBanana, 1); 
       }); 

       jQuery('#addOrangeToCart').bind('click', function(evt){ 

        cart.addProduct(productOrange, 1); 
       }); 

       jQuery('#addAppleToCart').bind('click', function(evt){ 

        cart.addProduct(productApple, 1); 
       }); 
      }); 
      }); 
      </script> 
     </head> 
     <body> 
     <div id="cartPlaceholder"></div> 

     <p> 
     <button id="addBananaToCart">add banana to cart</button><br/> 
     <button id="addOrangeToCart">add orange to cart</button><br/> 
     <button id="addAppleToCart">add apple to cart</button> 
     </p> 


     </body> 
     </html>

来源

2016-09-18 17:13:24 OBDM

创建具有AJAX，HTML5和jQuery一车系统只有

回答

相关问题