ajax代碼的速記

Question

我在想代碼很醜，因爲它太長了，我想知道這有一個簡寫。我需要幫助！

在我看來：

<table class="table table-responsive table-bordered table-hover table-striped" id="table"> 
<thead> 
    <tr> 
     <th>ID</th> 
     <th>Product Name</th> 
     <th>Price</th> 
     <th>Action</th> 
    </tr> 
</thead> 

<tbody> 
<?php foreach($products as $key => $value) : ?> 
    <tr> 
     <td> 
      <span id="data-id"><?php echo $value->prod_id; ?></span> 
     </td> 
     <td> 
      <span id="data-prodname-<?php echo $value->prod_id; ?>"><?php echo $value->product_name; ?></span> 
     </td> 
     <td> 
      &#8369; <span id="data-price-<?php echo $value->prod_id; ?>"><?php echo $value->price; ?></span> 
     </td> 
     <td> 
      <a class="btn btn-primary btn-edit" id="edit-product-<?php echo $value->prod_id; ?>"> 
       <i class="glyphicon glyphicon-pencil"></i> Edit 
      </a> 
     </td> 
    </tr> 
<?php endforeach; ?> 
</tbody> 

點擊編輯按鈕後，jQuery將觸發。我看到我的jquery它有很長的代碼，我只是替換了html代碼，而且我認爲它有簡寫。任何人都可以幫助我？先謝謝你。

$(form).ajaxSubmit({ 
type: 'post', 
url: 'Jewelry_controller/edit_product_exe', 
dataType: 'json', 
data: dataString, 
success: function(callback) 
{ 
    var a; 
    var productContainer = '<table class="table table-responsive table-bordered table-hover table-striped">'; 
     productContainer += '<tr>'; 
     productContainer += '<th>ID</th>'; 
     productContainer += '<th>Product Name</th>'; 
     productContainer += '<th>Price</th>'; 
     productContainer += '<th>Action</th>'; 
     productContainer += '</tr>'; 

     for(var i = 0; i < callback.length; i++) 
     { 
      a = callback[i]; 
      var ternary = a.status == '1' ? "Active" : "Inactive"; 

      productContainer += '<tr>'; 
      productContainer += '<td><span id="data-id">' + a.id +'</span></td>'; 
      productContainer += '<td><span id="data-prodname-'+ a.id +'">' + a.product_name + '</span></td>'; 
      productContainer += '<td>&#8369<span id="data-price-'+ a.id +'">' + a.price + '</span></td>'; 
      productContainer += '<td>'; 
      productContainer += '<a class="btn btn-sm btn-primary btn-edit" data-toggle="modal" data-target="#product-modal" id="edit-product-' + a.id + '"><i class="glyphicon glyphicon-pencil"></i> Edit</a>'; 
      productContainer += '</td>'; 
      productContainer += '</tr>'; 
     } 

    productContainer += '</table>'; 

    $('#table-product').html(productContainer); 
} 
}); 

在成功的代碼中，它有很長很長的代碼。我想把它縮短，任何人都可以幫忙？在此先感謝您 我是AJAX新手。

Answer 1

對於Ajax後： 訪問https://api.jquery.com/jquery.post/

對於使用jQuery創建自定義HTML標記。

 $('<div/>', { 
     'id':'myDiv1', 
     'class':'myClass', 
     'style':'cursor:pointer;font-weight:bold;', 
     'html':'<span>Creating dynamic content</span>', 
     'click':function(){ alert(this.id) }, 
     'mouseenter':function(){ $(this).css('color', 'red'); }, 
      'mouseleave':function(){ $(this).css('color', 'black'); } 
     }).appendTo('#myDiv2'); 

Answer 2

最好的想法是將「html-in-javascript」放入HTML中。它看起來像（它不工作的代碼，唯一的想法）

HTML

<template id="products-tpl"> 
<table class="table table-responsive table-bordered table-hover table-striped"> 
    <tr> 
     <th>ID</th> 
     <th>Product Name</th> 
     <th>Price</th> 
     <th>Action</th> 
    </tr> 
    <% for(var i = 0; i < data.length; i++) { %> 
     <tr> 
      <td> 
       <span id="data-id"><%=data[i].id %></span> 
      </td> 
      <td> 
       <span id="data-prodname-<%=data[i].id %>"><%=data[i].product_name %></span> 
      </td> 
      <td>&#8369<span id="data-price-<%=data[i].id %>"><%=data[i].price %></span></td> 
      <td> 
       <a class="btn btn-sm btn-primary btn-edit" data-toggle="modal" data-target="#product-modal" id="edit-product-<%=data[i].id %>"> 
       <i class="glyphicon glyphicon-pencil"></i> Edit</a> 
      </td> 
     </tr> 
    <% } %> 
</table> 

Javasript

$('#table-product').html(template("products-tpl", callback)); 

您可以在這裏選擇模板的框架之一https://developer.mozilla.org/en/docs/JavaScript_templates