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

中选择一个模板框架

ajax代码的简写

2 个答案: