當使用jQuery和AJAX

我開發的POS應用程序，我正在尋找條形碼（它在產品表保存在數據庫中）後取回產品插入相同的記錄如何更新表，還有就是添加上車按鈕，我點擊將在數據庫中的訂單表中添加產品詳細信息，價格和數量，並在添加到數據庫後顯示，如果我輸入相同的產品，則應增加其價格和數量。當使用jQuery和AJAX

當我點擊添加購物車的同一產品時，它從數據庫中檢索更新數量和價格的記錄，但它添加新行而不是更新現有行（因爲追加）有沒有其他方式可以創建表，這樣每次我都不必追加一個新行。

jQuery代碼是

$(document).ready(function(){ 

$("#submit").click(function(event){ 
    var barcode=$(this).closest("tr").find("td:nth-child(1)").text(); 
    var product=$(this).closest("tr").find("td:nth-child(2)").text(); 
    var price=$(this).closest("tr").find("td:nth-child(3)").text(); 
    var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1} 


    console.log(orderid); 
    $.ajax({ 
     type:'POST',  
     url:'/pos/addproduct', 
     dataType: "json", 
     data:JSON.stringify(order), 
     contentType: "application/json; charset=utf-8", 
     success: 
      function(data){ 

      $.each(data,function(index,value){ 

       var row=$("<tr><td>"+value.oid+"</td>"+"<td>"+value.pname+"</td>"+ 
         "<td>"+value.qty+"</td>"+"<td>"+value.price+"</td>"+"<td>" 
         +value.barcodeid+"</td></tr>"); 
       $("#order").append(row).removeClass("hidden"); 

      }) 

     } 
    }) 
}); 
})

和順序表

<table id="order" class="hidden" align="center"> 
<tr> 
<th>OrderId</th> 
<th>ProductName</th> 
<th>Quantity</th> 
<th>Price</th> 
<th>Barcode</th> 
</tr> 
<tr > 
</table>

來源

2017-02-13 shashank

我建議你事先創建你的ajax調用表。然後將唯一的id（uuid）關聯到數據庫中的每個產品。然後在你的表格中，每行都會有一個與產品自己的uuid相匹配的id。在你的成功方法中，首先嚐試獲得$（＃uuid）：如果它返回某個東西，這意味着你之前已經拿起了這個產品，只需要獲得數量單元格（你可以通過在數量td上放置一個名稱屬性來實現），否則就像你今天所做的那樣創建一個新行（但是在tr上使用id = uuid屬性，在qty td上使用name =「qtyCell」）。 – Zzirconium

我希望只有當有人點擊時才能創建表添加購物車按鈕 – shashank

爲什麼在成功功能中使用$ .each？你的服務器在POST回調響應中放置了什麼？ – Zzirconium

我首先假定您的服務器回答是一個給定orderId（這對於購物車是唯一的，即它不會改變會話範圍）的json對象，然後是所需的添加產品： - 其產品名稱 - 總價格了這隻產品的訂單（即單價*數量） - 數量 - 在barcodeid

我創建了一個的jsfiddle告訴你我的想法：example

它的工作原理很爲自己的代碼，除了

明顯，因爲我沒有你的服務器，我用的jsfiddle AJAX服務作爲結果，服務器端的數據是通過對訂單ID兩個全局變量處理返回我假設你的服務器返回的POST請求
和訂購數量（每個產品，這就是爲什麼它是一個對象）
在成功的功能，我找了小區（TD）符合「數量+條碼」，如果我找到它，我更新和總價細胞（這個ID是「價格」+條碼）。如果我沒有找到它，我會創建該行（這是您的代碼），同時爲數量和價格單元格設置適當的ID。

中所以下面的代碼片段無法正常工作（因爲沒有AJAX服務），請在上面的jsfiddle鏈接

var qty={}; 
 
var orderId = 12; 
 
$(document).ready(function() { 
 

 
    $("a[id^=submit]").click(function(event){ 
 
    var barcode=$(this).closest("tr").find("td:nth-child(1)").text(); 
 
    var product=$(this).closest("tr").find("td:nth-child(2)").text(); 
 
    var price=$(this).closest("tr").find("td:nth-child(3)").text(); 
 
    var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1} 
 

 
    if (qty.hasOwnProperty(barcode)) { 
 
     qty[barcode]++; 
 
     qty[barcode] = 1; 
 
    } 
 
    $.ajax({ 
 
     type:'POST',  
 
     url:'/echo/json/', 
 
     dataType: "json", 
 
     data://JSON.stringify(order), 
 
     { 
 
     json: JSON.stringify({ 
 
      oid: orderId, 
 
      pname: product, 
 
      price: parseFloat(price)*qty[barcode], 
 
      qty:qty[barcode], 
 
      barcodeid:barcode 
 
     }), 
 
     delay: 1 
 
     }, 
 
     contentType: "application/json; charset=utf-8", 
 
     success:function(data) { 
 
      value = data 
 
      var qtyItm = $("#qty"+value.barcodeid); 
 
      if (qtyItm.length) { 
 
      qtyItm.html(qty[barcode]); 
 
      $("#price"+value.barcodeid).html(value.price); 
 
      } else { 
 
      var row=$("<tr><td>"+value.oid+"</td>"+"<td>"+value.pname+"</td>"+ 
 
       "<td id=\"qty"+value.barcodeid+"\">"+value.qty+"</td>"+ 
 
       "<td id=\"price"+value.barcodeid+"\">"+value.price+"</td>"+ 
 
       "<td>"+value.barcodeid+"</td></tr>"); 
 
      $("#order").append(row).removeClass("hidden"); 
 
      } 
 
     }, 
 
     fail:function() { 
 
      alert('problem') 
 
     } 
 
    }) 
 
    }); 
 
});

table { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <table align="center"> 
 
    <tr><th>Barcode</th><th>ProductName</th><th>Price</th><th>ADD</th></tr> 
 
    <tr><td>97</td><td>johson</td><td>44.0</td><td><a href="#" id="submit97">Add</a></td></tr> 
 
    <tr><td>98</td><td>another product</td><td>10.0</td><td><a href="#" id="submit98">Add</a></td></tr> 
 
    </table> 
 

 
    <table id="order" align="center"> 
 
    <tr><th>OrderId</th><th>ProductName</th><th>Quantity</th><th>Price</th><th>Barcode</th></tr> 
 
    </table> 
 

 
</body>

來源

2017-02-13 15:25:19 Zzirconium

你的想法工作正常，如果我從數據庫中檢索一條記錄，但在記錄列表的情況下，我必須使用$ .each作爲不被更新的記錄 – shashank

我做了更改，我遍歷所有的對象，它的工作 – shashank

簡單的解決方案將是建立整個Table放到JS沒有太多的中斷您的代碼..

JS代碼---

$(document).ready(function(){ 

    $("#submit").click(function(event){ 
     var barcode=$(this).closest("tr").find("td:nth-child(1)").text(); 
     var product=$(this).closest("tr").find("td:nth-child(2)").text(); 
     var price=$(this).closest("tr").find("td:nth-child(3)").text(); 
     var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1} 


     console.log(orderid); 
     var TableData = ""; 


     $.ajax({ 
       type:'POST',  
       url:'/pos/addproduct', 
       dataType: "json", 
       data:JSON.stringify(order), 
       contentType: "application/json; charset=utf-8", 
       success: 
        function(data){ 
TableData = TableData + '<table id="order" align="center">' 
     TableData = TableData + '<tr>'; 
     TableData = TableData + '<th>OrderId</th>'; 
     TableData = TableData + '<th>ProductName</th>'; 
     TableData = TableData + '<th>Quantity</th>'; 
     TableData = TableData + '<th>Price</th>'; 
     TableData = TableData + '<th>Barcode</th>'; 
     TableData = TableData + '</tr>'; 
        $.each(data,function(index,value){ 
         TableData = TableData + "<tr><td>"+value.oid+"</td><td>"+value.pname+"</td>"; 
         TableData = TableData + "<td>"+value.qty+"</td>"+"<td>"+value.price+"</td>"; 
         TableData = TableData + "<td>"+value.barcodeid+"</td></tr>"; 
        }) 
TableData = TableData + '</table>' 
       } 
      }); 


     $("#OrderDiv").html(""); 
     $("#OrderDiv").html(TableData); 
}); 
})

，並在HTML替換

<table id="order" class="hidden" align="center"> 
<tr> 
<th>OrderId</th> 
<th>ProductName</th> 
<th>Quantity</th> 
<th>Price</th> 
<th>Barcode</th> 
</tr> 
<tr > 
</table>

隨着

<div id = 'OrderDiv'> </div>

成功請求後，申請必要的CSS。

來源

2017-02-13 12:40:32 user7417866

我經歷了所有的對象迭代運行從數據庫中檢查，並檢查id是否與價格和條碼相同（如果相同）使用div元素更新價格和數量

function(data){ 
      $.each(data,function(index,value){ 
       var temp = "qty" + data[index].barcodeid.trim(); 
       var qtyitm=$("#"+temp); 
       if(qtyitm.length != 0){ 
        qtyitm.html(data[index].qty); 
        //("#price"+(data[index].barcodeid.trim())).html(data[index].price); 
        temp = "price" + data[index].barcodeid.trim(); 
        qtyitm = $("#"+temp); 
        qtyitm.html(data[index].price); 
       } 
       else{ 
        var row=$("<tr><td>"+data[index].oid+"</td>"+"<td>"+data[index].pname.trim()+ 
          "</td>"+ 
          "<td id=\"qty"+data[index].barcodeid.trim()+"\">"+data[index].qty+"</td>"+ 
          "<td id=\"price"+data[index].barcodeid.trim()+"\">"+data[index].price+"</td>"+ 
          "<td>" 
          +data[index].barcodeid.trim()+"</td></tr>"); 

        $("#order").append(row).removeClass("hidden"); 
        } 
      }) 

     }

來源

2017-02-13 19:53:27 shashank

當使用jQuery和AJAX

回答

相關問題